文档章节

react-native上手体验

卢勇福
 卢勇福
发布于 2015/03/31 23:10
字数 718
阅读 295
收藏 1


查看原文

这2天react-native放出源码,凭着facebook牌子和通过js编写原生应用的特点很快就热了起来,github的star过万应该毫无悬念。目前放出来的是ios版本,后续还会放出android版本,在加上之前的reactjs,那一份代码搞定三个平台并非不可能,于是我也下了个react-native来体验一把。


  1. react-native目前只放出了ios版本,那为了体验,你必须有os x系统,并且安装了xcode.

  2. 另外官方推荐使用homebrew来安装nodejs,watchman,flow等相关工具,那我们首先安装homebrew:


    ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  3. 安装完homebrew,我们分别安装nodejs,watchman,flow,分别输入如下命令:
    brew install node

    brew install watchman

    brew install flow

  4. 接着我们安装 react-native本身:

    npm install -g react-native-cli

  5. 然后我们就可以建立一个demo工程,这里我照着官方的示例建了

    AwesomeProject 这么一个工程,输入如下命令建立工程:

    react-native init AwesomeProject


  6. 然后我们用xcode打开 AwesomeProject/AwesomeProject.xcodeproj,运行cammad+r,可以看到模拟器出来一个app效果:


  7. 这时候同时弹出了一个终端窗口:


  8. 我们可以看到react-native是通过nodejs启动了一个 8081端口的server来进行实时调试,这时候如果你修改了index.ios.js的代码,然后在xcode里执行cmd+r,xcode会从8081端口拉取最新的代码执行,并且更新模拟器相应修改,是不是很爽?



接下来我们看看代码结构:


写过ios的人都知道,Appdelegate.h,Appdelegate.m是ios原生代码的入口程序,打开Appdelegate.m,我们看到这样一行代码:

jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];

从字面理解,我们应该知道react-native是从本地端口拉取index.ios.js来执行一下了。为了验证是否是这样,我们改一下index.ios.js的名字为test.ios.js,然后在Appdelegate.m里把index.ios.bundle改成test.ios.bundle,重新cmd+r,执行没有问题,这就验证了我们的假设。

8.最后我们看看index.os.js的内容,这里几乎就是reactjs的写法,大家如果想了解不妨去react官网http://facebook.github.io/react   看下。这里就不详细说了。


总之,facebook的这个react-native想像空间还是蛮大的,一个是降低了开发native    app的难度(一大波前端js程序员可以写),

另外一个很可能一套代码android,ios,web都搞定了!!

长按下面二维码图片选择“识别图中二维码”关注帝都码仔公众号:



© 著作权归作者所有

卢勇福

卢勇福

粉丝 44
博文 19
码字总数 22106
作品 10
海淀
高级程序员
私信 提问
WEEX、React-Native开发App心得

WEEX、React-Native开发App心得 起因 最近公司准备使用weex或者react-native进行跨平台开发,并不是要做新的app而是准备用这种方式代替原来webview+h5内嵌这种方式,这种hybrid的方式,存在于...

V1admirMakarov
2018/01/06
0
0
对于ApiCloud和React Native的选择

开发App已经有两个星期了。第一个星期主要尝试了下用ApiCloud、这周最主要尝试了下React Native。各有千秋吧。 ApiCloud 优点: 1、上手简单,对于做过web开发的人来说,上手非常容易。没几天...

听_风
2016/03/23
374
1
跨平台移动开发工具--Weex

2016年4月21日,阿里巴巴在Qcon大会上宣布开源跨平台移动开发工具Weex,Weex能够完美兼顾性能与动态性,让移动开发者通过简捷的前端语法写出Native级别的性能体验,并支持iOS、安卓、YunOS及...

勾三股四
2016/04/21
68.4K
16
React Native vs. Cordova.

简评:跨平台开发五彩斑斓,本文作者简单介绍 RN 和 Cordova 的两种不同终端跨平台流程,从与原生开发联系中分析其利弊。 原生是一个相对概念。其实软件开发最后意义指在操作硬件(大量晶体管...

极光推送
2018/10/15
86
0
Hybrid App 和 React Native 开发那点事

简介:Hybrid App(混合模式移动应用)开发是指介于Web-app、Native-App这两者之间的一种开发模式,兼具「Native App 良好用户交互体验的优势」和「Web App 跨平台开发的优势」。很多人都知道...

OneAPM蓝海讯通
2016/03/18
276
0

没有更多内容

加载失败,请刷新页面

加载更多

采坑指南——k8s域名解析coredns问题排查过程

正文 前几天,在ucloud上搭建的k8s集群(搭建教程后续会发出)。今天发现域名解析不了。 组件版本:k8s 1.15.0,coredns:1.3.1 过程是这样的: 首先用以下yaml文件创建了一个nginx服务 apiV...

码农实战
4分钟前
1
0
【2019年8月版本】OCP 071认证考试最新版本的考试原题-第6题

choose three Which three statements are true about indexes and their administration in an Orade database? A) An INVISIBLE index is not maintained when Data Manipulation Language......

oschina_5359
7分钟前
1
0
阿里巴巴开源 Dragonwell JDK 最新版本 8.1.1-GA 发布

导读:新版本主要有三大变化:同步了 OpenJDK 上游社区 jdk8u222-ga 的最新更新;带来了正式的 feature:G1ElasticHeap;发布了用户期待的 Windows 实验版本 Experimental Windows version。...

阿里巴巴云原生
12分钟前
1
0
教你玩转Linux—磁盘管理

Linux磁盘管理好坏直接关系到整个系统的性能问题,Linux磁盘管理常用三个命令为df、du和fdisk。 df df命令参数功能:检查文件系统的磁盘空间占用情况。可以利用该命令来获取硬盘被占用了多少...

xiangyunyan
15分钟前
3
0
js 让textarea的高度自适应父元素的高度

textarea按照普通元素设置height是没有作用的,可以这么来设置, 下面给上一段项目代码 JS代码: $.fn.extend({ txtaAutoHeight: function () { return this.each(function () {...

文文1
15分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部