文档章节

react-native上手体验

卢勇福
 卢勇福
发布于 2015/03/31 23:10
字数 718
阅读 284
收藏 1
点赞 0
评论 0


查看原文

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

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



© 著作权归作者所有

共有 人打赏支持
卢勇福

卢勇福

粉丝 39
博文 19
码字总数 22106
作品 9
海淀
高级程序员
WEEX、React-Native开发App心得

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

V1admirMakarov ⋅ 01/06 ⋅ 0

对于ApiCloud和React Native的选择

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

听_风 ⋅ 2016/03/23 ⋅ 1

转载-浅谈React

Part 1 | 移动端开发方案 目前移动端开发方案可谓百家齐鸣,以至于很难使用单一条件对所有移动端开发方案进行划分,在此我分成三大类来引导各位了解主要的开发方式。 Web开发 简介:基于 We...

我很水嘚 ⋅ 2017/12/22 ⋅ 0

跨平台移动开发工具--Weex

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

勾三股四 ⋅ 2016/04/21 ⋅ 15

Hybrid App 和 React Native 开发那点事

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

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

iOS 开发是否要采用 React Native?

前言 React Native 是 Facebook 2015年开源的 Javascript 框架,旨在使用 Javascript 高效开发手机端 App。配合着多个显而易见的优势和 Facebook 强大的宣传机器,它立刻成为国内外大小公司的...

故胤道长 ⋅ 2017/11/20 ⋅ 0

他用Weex花两天时间开发出『One·一个』App

自阿里在QCon北京2016上面宣布Weex内测已经过去了一个多月时间,在这段时间里,有不少开发者通过申请已经获得内测资格,并尝试用它进行开发,阿里也进一步邀请更多开发者来体验和使用Weex,如...

阿里百川 ⋅ 2016/06/30 ⋅ 0

关于 React Native,您想知道的都在这里了

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5...

OSC源创君 ⋅ 2016/10/31 ⋅ 20

大前端时代 当原生APP碰上Vue2.0(开篇)

本人是iOS开发程序员一枚,最近一个月却都在忙着前端相关的事,不得不感叹这大前端时代。关于大前端时代的看法和想法日后有空详细地发表一下。今天讲一下Vue2.0。 5月 May 之前刚忙完现在APP...

APP叫我取个帅气的昵称 ⋅ 2017/07/19 ⋅ 0

React Native电商项目实战——开篇

React Native 简称 RN 是 FaceBook 发布的跨平台开发框架,它的设计理念是:使用 React Native 开发,既拥有Native 的良好人机交互体验,又保留了 React 开发效率。 RN 技术已经非常成熟,我...

于连林520wcf ⋅ 06/05 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

MySQL主从复制原理、半同步操作步骤及原理

1.1 企业Linux运维场景数据同步方案 1.1.1 文件级别的异机同步方案 1、scp/sftp/nc 命令可以实现远程数据同步。 2、搭建ftp/http/svn/nfs 服务器,然后在客户端上也可以把数据同步到服务器。...

xiaomin0322 ⋅ 18分钟前 ⋅ 0

Oracle10g 数据及文件迁移过程[原]

QL*Plus: Release 10.2.0.1.0 - Production on 星期三 5月 11 10:22:35 2011 Copyright (c) 1982, 2005, Oracle. All rights reserved. 连接到: Oracle Database 10g Enterprise Edition Re......

harrypotter ⋅ 24分钟前 ⋅ 0

nginx安装

1:安装工具包 wget、vim和gcc yum install -y wget yum install -y vim-enhanced yum install -y make cmake gcc gcc-c++ 2:下载nginx安装包 wget http://nginx.org/download/nginx-1......

壹丶贰 ⋅ 27分钟前 ⋅ 0

ideaVim安装及配置

1.安装插件 File-Settings-Plugins,Browse Repositories,输入ideavim,安装。 重启后,在Tools-Vim Emulator启用。 2.快捷键设置 ideaViim键与idea快捷键有冲突,可以在Settings-Other Se...

Funcy1122 ⋅ 31分钟前 ⋅ 0

MySQL中B+Tree索引原理

B+树索引是B+树在数据库中的一种实现,是最常见也是数据库中使用最为频繁的一种索引。B+树中的B代表平衡(balance),而不是二叉(binary),因为B+树是从最早的平衡二叉树演化而来的。在讲B...

浮躁的码农 ⋅ 46分钟前 ⋅ 0

两道面试题,带你解析Java类加载机制

在许多Java面试中,我们经常会看到关于Java类加载机制的考察,例如下面这道题: class Grandpa{ static { System.out.println("爷爷在静态代码块"); }} cl...

1527 ⋅ 50分钟前 ⋅ 0

SpringCloud(Data Flow)

dataflow-server

赵-猛 ⋅ 今天 ⋅ 0

深入理解Java虚拟机

这本书我读到第8章,之后就是在读不下去了。 读到后面是一种痛苦的体验,太多的东西是不全面的,大量的专有名词是没有解释的,读到最后很多东西仅仅是一个侧面,所以我觉得,这本书不适合初学...

颖伙虫 ⋅ 今天 ⋅ 0

NanoPi NEO core/ Ubuntu16.04单网卡配置3个IP地址(2个静态,1个动态)

配置 root@NanoPi-NEO-Core:/etc/network# cat interfacesauto loiface lo inet loopbackallow-hotplug eth0iface eth0 inet static address 172.31.188.249 netmask 255.......

SamXIAO ⋅ 今天 ⋅ 0

三步为你的App集成LivePhoto功能

摘要:LivePhoto是iOS9新推出的一种拍照方式,类似于拍摄Gif图或录制视频片段生成图片。如果没有画面感,可以联想《哈利波特》霍格沃茨城堡的壁画,哈哈,很炫酷有木有,但坑爹的是只有iphone6S以...

壹峰 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部