react-native上手体验
react-native上手体验
卢勇福 发表于3年前
react-native上手体验
  • 发表于 3年前
  • 阅读 254
  • 收藏 1
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 这2天react-native放出源码,凭着facebook牌子和通过js编写原生应用的特点很快就热了起来.目前放出ios版本,后续会放出android版本,加上之前的reactjs,一份代码搞定三个平台并非不可能。


查看原文

这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都搞定了!!

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



共有 人打赏支持
卢勇福
粉丝 38
博文 19
码字总数 22106
作品 9
×
卢勇福
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: