开始使用React Native
OS X - 本向导假设您的操作系统是OS X，因为这是开发iOS应用所必须的。
推荐使用 来安装Watchman和Flow
安装 4.0或更高版本(译注：如果你并不使用Node.js开发网站，只是用于React Native的开发，那么请先安装homebrew，然后直接使用brew install node安装即可，不必按照下面的nvm的安装步骤)
安装 nvm（安装向导在）。然后运行nvm install node && nvm alias default node，这将会默认安装最新版本的Node.js并且设置好命令行的环境变量，这样你可以输入node命令来启动Node.js环境。nvm使你可以同时安装多个版本的Node.js，并且在这些版本之间轻松切换。
如果你从未接触过npm，推荐阅读
在命令行中输入brew install watchman，我们推荐安装，否则你可能会遇到一个Node.js监视文件系统的BUG。
如果你希望使用来为js代码加上类型检查，那么在命令行中输入brew install flow来安装flow。（译注：新手可以跳过这一步）
我们推荐您定期运行brew update && brew upgrade来保持上述几个程序为最新版本。
iOS开发环境准备
你需要安装 7.0或者更高版本。你可以在App Store中找到并安装Xcode。
译注：如果您选择从第三方网站/镜像下载Xcode，请务必从正规镜像网站下载验证文件Hash以防止类似XcodeGhost的安全风险发生，不要信任论坛、百度空间等分享渠道
Android开发环境准备
要使React Native应用支持Android，首先需要安装Android SDK (如果你不想连接安卓设备，那么还需要一个安卓模拟器)。参见
了解如何搭建安卓开发环境。
注： 现在Android开发。
译注： Windows用户可以参考来搭建环境。
$ npm install -g react-native-cli
$ react-native init AwesomeProject
译注：由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
另，执行init时切记不要在前面加上sudo（否则新项目的目录所有者会变为root而不是当前用户，导致一系列权限问题，请使用chown修复）。本站论坛区提供了。完整打包全部iOS和Android的第三方依赖，只要环境配置正确，无需科学上网漫长等待，解压即可直接运行。
运行iOS应用
$ cd AwesomeProject
用XCode打开ios/AwesomeProject.xcodeproj并点击Run按钮。
使用你喜欢的文本编辑器打开index.ios.js并随便改上几行。
在iOS Emulator中按下?-R就可以刷新APP并看到你的最新修改！
运行Android应用
$ cd AwesomeProject
$ react-native run-android
使用你喜欢的文本编辑器打开index.android.js并随便改上几行
按Menu键（通常是F2，在Genymotion模拟器中是?+M）然后选择 Reload JS 就可以看到你的最新修改。
在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。
注：: 如果你打算在真实设备而非模拟器上运行，参见
恭喜！现在你已经成功运行并修改了你的第一个React Native应用！
如果你在以上过程中遇到了任何问题，可以看看论坛里总结的。
为已有的React Native工程添加Android支持
如果你已经有了一个只有iOS版本的React Native工程，并且希望添加Android支持，你需要在你的工程目录下运行以下命令：
打开package.json文件，在dependencies项中找到react-native，并将其后的版本号修改为。
$ npm install
$ react-native android
快速入门使用指南使用指南(iOS)使用指南(Android)组件API接口兼容(POLYFILLS)React Native中文网.(C) 2017 杭州欧石南网络科技有限公司浙ICP备号-3浙公网安备 11号问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如题，react-native init 一个新项目，等好久了还是没反应，npm版本在2.x和3.x下都试过，也用过taobao的npm镜像，也用vpn翻墙下过，都不能成功，请问有什么具体的解决方法么？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我用nvm安装的node4.x，然后init大概半小时能完成
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
node不都是4.x的版本么
同步到新浪微博
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：中国领先的IT技术网站
51CTO旗下网站
React Native入门项目与解析
React Native是最近非常火的一个话题，介绍如何利用React Native进行开发的文章和书籍多如牛毛，但面向入门水平并介绍它工作原理的文章却寥寥无几。下面给大家详细介绍一下。
作者：朱源浩来源：| 13:34
通过React Native 环境搭建和创建项目(Mac)可以成功创建一个新项目，即直接利用以下语句创建：
//命令行创建项目：&&react-native&init&AwesomeProject&
创建成功后，刚入门的我们主要关注两个文件：
1)iOS项目目录下的AppDelegate.m
为将iOS项目连接js文件的入口，以及相关初始化操作。
2)根目录下的index.ios.js
为iOS对应的js入口文件。
一、 解析iOS项目中的AppDelegate.m
1. AppDelegate.m 代码如下：
#import&&AppDelegate.h&&&//&React&Native相关头文件&&#import&&RCTBundleURLProvider.h&&&#import&&RCTRootView.h&&&@implementation&AppDelegate&&-&(BOOL)application:(UIApplication&*)application&didFinishLaunchingWithOptions:(NSDictionary&*)launchOptions&&{&&NSURL&*jsCodeL&&/*&&当应用开始运行的时候，RCTRootView将会从以下的URL中加载应用：(本地调试的时候是直接在本地服务器中的index.ios加载，发布时设置有所不同)&&重新调用了你在运行这个App时打开的终端窗口，它开启了一个&packager&和&server&来处理上面的请求。&&在&Safari&中打开那个&URL;你将会看到这个&App&的&JavaScript&代码&&*/&&[[RCTBundleURLProvider&sharedSettings]&setDefaults];&&jsCodeLocation&=&[[RCTBundleURLProvider&sharedSettings]&jsBundleURLForBundleRoot:@&index.ios&&fallbackResource:nil];&&//&RCTRootView是一个UIView容器，承载着React&Native应用。同时它也提供了一个联通原生端和被托管端的接口。&&RCTRootView&*rootView&=&[[RCTRootView&alloc]&initWithBundleURL:jsCodeLocation&&moduleName:@&AwesomeProject&&&initialProperties:nil&&launchOptions:launchOptions];&&rootView.backgroundColor&=&[[UIColor&alloc]&initWithRed:1.0f&green:1.0f&blue:1.0f&alpha:1];&&self.window&=&[[UIWindow&alloc]&initWithFrame:[UIScreen&mainScreen].bounds];&&UIViewController&*rootViewController&=&[UIViewController&new];&&rootViewController.view&=&rootV&&self.window.rootViewController&=&rootViewC&&[self.window&makeKeyAndVisible];&&return&YES;&&}&&@end&
2. RCTRootView
RCTRootView将React
Natvie视图封装到原生组件中。(用户能看到的一切内容都来源于这个RootView，所有的初始化工作也都在这个方法内完成。)
通过RCTRootView的初始化函数你可以将任意属性传递给React Native应用。
参数initialProperties必须是NSDictionary的一个实例。
这一字典参数会在内部被转化为一个可供JS组件调用的JSON对象。
NSArray&*imageList&=&@[@&/bar1.png&,&&@&/bar2.png&];&&NSDictionary&*propsDict&=&@{@&images&&:&imageList};&&RCTRootView&*rootView&=&[[RCTRootView&alloc]&initWithBundleURL:jsCodeLocation&&moduleName:@&AwesomeProject&&&initialProperties:&propsDict&&launchOptions:launchOptions];&
在js文件中，则是通过this.props.images调用上面定义的参数。
this为AppRegistry.registerComponent注册的组件(下面会讲到)
RCTRootView同样提供了一个可读写的属性appProperties。在appProperties设置之后，React
Native应用将会根据新的属性重新渲染。当然，只有在新属性和之前的属性有区别时更新才会被触发。
(注意：1.可以随时更新属性，但是更新必须在主线程中进行，读取则可以在任何线程中进行。2.更新属性时并不能做到只更新一部分属性)
NSArray&*imageList&=&@[@&/bar3.png&,&&@&/bar4.png&];&&rootView.appProperties&=&@{@&images&&:&imageList};&
二、解析js入口文件(index.ios.js)
1. index.ios.js 代码如下：
'use&strict';&//&全局进入严格模式(目前发现不用也行)&&/**&&&消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;&&消除代码运行的一些不安全之处，保证代码运行的安全;&&提高编译器效率，增加运行速度;&&为未来新版本的Javascript做好铺垫。&&*/&&//导入一些必要的模块&&//React&Native内置的组件可以直接通过import&{&xxx&}&from&'react-native'&进行导入，当然也可以自定义组件。&&import&React,&{&Component&}&from&'react';&&import&{&&AppRegistry,&&StyleSheet,&&Text,&&View,&&TouchableOpacity&&}&from&'react-native';&&//类，这是默认的载入类，继承自Component，Component类(组件)似于Android和iOS中的View&&//这里为创建一个组件&&class&AwesomeProject&extends&Component&{&&//构造器&，每个组件都拥有自己的属性(props)和状态(state)&&//调用this.setState更改状态text或者isTouchDown时，组件会触发render函数进行渲染更新&&constructor(props)&{&&super(props);&&this.state&=&{&&text:'Welcome&to&React&Native!',&&isTouchDown:false&&};&&}&&//在最初的渲染之前调用一次，可在里面进行预处理操作&&//在React中，设置this.state会导致重新渲染，但是componentWillMount设置this.state并不会对导致render调用多次&&//之后会对component的生命周期进一步解释&&componentWillMount()&{&&}&&//渲染函数，用来渲染实际的Component可视部分&&render()&{&&//var定义变量，根据状态值改变对应值&&var&welcomeText&=&this.state.&&var&&&if&(this.state.isTouchDown)&{&&bgcolor&=&'#c5c5ab';&&}&else&{&&bgcolor&=&'#F5FCFF';&&}&&console.log('testtststststts');&&//返回的即界面显示内容&&return&(&&&View&style={[styles.container,&{backgroundColor:&bgcolor}]}&&&&Text&style={styles.welcome}&&&{welcomeText}&&&/Text&&&&Text&style={styles.instructions}&&&To&get&started,&edit&index.android.js&&&/Text&&&&Text&style={styles.instructions}&&&Shake&or&press&menu&button&for&dev&menu&&&/Text&&&&TouchableOpacity&onPress={this.touchDown.bind(this)}&&&&Text&style={[styles.instructions,&{backgroundColor:&'green'}]}&&&test&touch&Me&&&/Text&&&&/TouchableOpacity&&&&/View&&&);&&}&&//&自定义函数&&touchDown()&{&&//&console.log&控制台打印，可打印值，多用于调试&&console.log('&&',&this.isTouchDown);&&if&(!this.state.isTouchDown)&{&&this.setState({&&text:'Test&Touch&Down&Success',&&isTouchDown:true&&});&&}&else&{&&this.setState({&&text:'Test&Touch&Down&Again&Success',&&isTouchDown:false&&});&&}&&}&&}&&//定义样式&&const&styles&=&StyleSheet.create({&&container:&{&&flex:&1,&&justifyContent:&'center',&&alignItems:&'center',&&backgroundColor:&'#F5FCFF',&&},&&welcome:&{&&fontSize:&20,&&textAlign:&'center',&&margin:&10,&&},&&instructions:&{&&textAlign:&'center',&&color:&'#333333',&&marginBottom:&5,&&},&&});&&//AppRegistry&定义了App的入口，并提供了根组件。&&//第一个'AwesomeProject'要与AppDelegate里注册的moduleName一致&&//第二个AwesomeProject则是入口组件，即上面定义的Component类&&AppRegistry.registerComponent('AwesomeProject',&()&=&&AwesomeProject);&
2. 运行效果：
简单运行效果.png
3. 基础概念解释
代码中的 Text, View,
TouchableOpacity均为基础组件。AwesomeProject则是自己创建的组件，也作为项目的入口组件。
Native项目中，所有展示的界面，都可以看做是一个组件(Component)只是功能和逻辑上的复杂程度不同。每一个是许许多多小的组件拼成的，每个小的组件也有自己对应的逻辑。
2)组件的状态与属性
组件本质上是状态机，输入确定，输出一定确定。组件把状态与结果一一对应起来，组件中有state与prop(状态与属性)。
属性(props)是标签里面的属性, 组件之前通过标签的属性来传递数据，由父组件传递给子组件(单向的属性传递)。
如果component的某些状态由外部所决定，并且会影响到component的render，那么这些状态就应该用props表示。
例如：一个下拉菜单的component，有哪些菜单项，是由这个component的使用者和使用场景决定的，那么&菜单项&这个状态，就应该用props表示，并且由外部传入。
状态(state)是子组中的状态，内部的事件方法或者生命周期方法都可以调用this.setState来变更，当状态发生变化的同时，组件也会触发render函数进行渲染更新。
如果component的某些状态需要被改变，并且会影响到component的render，那么这些状态就应该用state表示。
例如：一个购物车的component，会根据用户在购物车中添加的产品和产品数量，显示不同的价格，那么&总价&这个状态，就应该用state表示。
【编辑推荐】
【责任编辑： TEL：（010）】
大家都在看猜你喜欢
关注热点原创原创聚焦
24H热文一周话题本月最赞
讲师：30790人学习过
讲师：218403人学习过
讲师：16538人学习过
精选博文论坛热帖下载排行
该书为C#经典名著！是Wrox红皮书中最畅销的品种之一。从第1版开始就名满天下；其第3版被评选为2005年最权威的十大IT图书之一；并荣获“2005...
订阅51CTO邮刊