上一弹讲了React的内容，为什么这一弹突然就跳到了React Native了，其实，我想说的是我看中的还是RN，使用它能够实现跨平台；原因下一弹再讲，先上环境搭建，可能在搭建环境的过程中会遇到若干问题，有大牛已经踩好了坑，借鉴即可；
本文环境搭建包括三种：Windows、Ubuntu（Linux）、Mac Os。官方最初推出的React Native 环境实在OSX上的，在0.14版本之后（目前最新是0.18），可以支持Linux和Windows环境了。官网描述：
由于React Native开发iOS需要Mac电脑，并且大部分Facebook和为React
Native贡献代码的工程师使用的都是Mac电脑，所以支持OS
X是最高优先级的。尽管如此，我们也希望Linux和Windows能够得到支持。我们相信最好的对于Linux和Windows的支持，一定来自于日常
习惯于使用这些系统的人们。这就是为什么对于Linux和Windows的支持需要来自社区不间断的共同努力。给我们提交任何的问题报告，并且提交解决问题的Pull Request，我们会协助检验和合并这些修改。我们期待在未来能看到您的贡献并且非常感谢您在这个过程中付出的耐心和努力。
从0.14版本起，Android开发环境已经基本可以在Linux和Windows环境下运行。你需要安装4.0或更高版本的Node.js。在Linux上，我们建议你安装watchman，否则你可能会遇到Node.js监视文件系统的一个BUG。
在Windows平台上还缺少什么在Windows平台上，在你运行react-native run-android之后，packager不会自动启动。你需要这样自行启动它：#对于React Native版本 & 0.14的cd MyAwesomeAppnode node_modules/react-native/packager/packager.js#对于React Native版本 &= 0.14的 (这个版本移除了packager.js)cd MyAwesomeApp
react-native start
如果你碰到了ERROR
Watcher took too long to load的报错，请尝试将这个文件中的MAX_WAIT_TIME值改得更大一些 (文件的具体路径是node_modules\react-native\packager\react-packager\src\DependencyResolver\FileWatcher\index.js或node_modules/react-native/packager/react-packager/src/FileWatcher/index.js)。
鉴于Windows和Linux上安装的麻烦情况，先介绍前两种操作系统上的安装步骤。一、Windows环境搭建
Windows上的React环境搭建，由于我本人使用的ubuntu系统，因此未来的及进行验证，请谅解。
1.最新情报
0.14以上版本不再需要自行调用bundle了。0.14.1已经修复了之前在windows下命令行的BUG，不过图片资源处理还有一个BUG需要解决。0.12已经发布。很多原本需要手动修改BUG的部分很多已经不再需要。2.安装JDK
从Java官网下载JDK并安装。请注意选择x86还是x64版本。推荐将JDK的bin目录加入系统PATH环境变量。3.安装Android SDK
可以单独安装Android SDK，也可以通过Eclipse ADT或者Android Studio一并安装。推荐使用Android Studio，以下说明会默认以Android Studio的方式说明。请注意选择x86还是x64版本。为了加速下载，推荐从AndroidDevTools下载。然后进入SDKManager(可通过Android Studio菜单Tools-Android-SDK Manager)，确保以下项目已经安装并更新到最新：Tools/Android SDK Tools (24.3.3)Tools/Android SDK Platform-tools (22)Tools/Android SDK Build-tools (23.0.1)Android 6.0 (API 23)/SDK Platform (1)Extras/Android Support Library(23.0.1)Extras/Android Support Repository推荐使用腾讯Bugly的镜像加速下载。查看说明推荐将SDK的platform-tools子目录加入系统PATH环境变量。4.安装C++环境
推荐从itellyou下载并安装Visual Studio 。也可选择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。5.安装msysgit
虽然不知道为什么init那一步需要用到这个东西，在这里下载安装。6.安装Python
从官网下载并安装python 2.7.x7.安装node.js
从官网下载node.js的官方4.1版本或更高版本。建议设置npm镜像以加速后面的过程（或使用科学上网工具）。npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist8安装react-native命令行工具npm install -g react-native-cli9.创建项目进入你的工作目录，运行react-native init MyProject并耐心等待数（或数十）分钟。0.14版本中带来了一个新的问题以至于在windows下引用图片不能成功（在0.15后修复），请参考这里进行对应修改以绕过此BUG。11.运行packagerreact-native start可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本。第一次访问通常需要十几秒，并且在packager的命令行可以看到进度条。如果你遇到了ERROR Watcher took too long to load的报错，请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js，将其中的MAX_WAIT_TIME 从25000改为更大的值（单位是毫秒）12.运行模拟器
推荐使用BlueStacks不过要小心它推送的广告和垃圾应用。如果有真机，可以不必运行模拟器，要配置好驱动，使得adb devices可以看到对应的设备。13.安卓运行
保持packager开启，另外打开一个命令行窗口，然后在工程目录下运行react-native run-android首次运行需要等待数分钟并从网上下载gradle依赖。运行完毕后可以在模拟器或真机上看到应用自动启动了。如果gradle依赖下载出现报错，请多试几次，或者设置VPN加速。如果apk安装运行出现报错，请检查上文中安装SDK的环节里所有依赖是否都已装全，platform-tools是否已经设到了PATH环境变量中，运行adb devices能否看到设备。至此，应该能看到APP运行，并报错 Unable to download JS bundle摇晃设备或按Menu键（Bluestacks模拟器按键盘上的菜单键，通常在右Ctrl的左边 或者左Windows键旁边），可以打开调试菜单，点击Dev Settings，选Debug server host for device，输入你的正在运行packager的那台电脑的局域网IP加:8081（同时要保证手机和电脑在同一网段，且没有防火墙阻拦），再按back键返回，再按Menu键，在调试菜单中选择Reload JS，就应该可以看到运行的结果了。如果真实设备白屏但没有弹出任何报错，可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。14安卓调试
打开Chrome，访问 http://localhost:8081/debugger-ui，应当能看到一个页面。按F12打开开发者菜单。在模拟器或真机菜单中选择Debug JS，即可开始调试。二、Linux上的环境搭建以ubuntu kylin15.10为例，搭建React Native的开发环境如下：
1.安装 node.js
在官网（https://nodejs.org/en/）下载源码安装即可,
// 安装后查看版本
2.安装 watchman
参考文档（https://facebook.github.io/watchman/docs/install.html）
$ sudo apt-get install autoconf
automake python-dev
安装 watchman, 如果出错, 查看安装依赖的详细文档
$ git clone /facebook/watchman.git
$ cd watchman
$ git checkout v4.3.0
# the latest stable release
$ ./autogen.sh
$ ./configure
$ sudo make install
3.安装 react-native
$ npm install -g react-native-cli
4. 创建react-native 项目
$ react-native init AwesomeProject
启动 server, 如果没有启动server , 会报错 React Native: ReferenceError: Can't find variable: require (line 1 in the generated bundle)
$ react-native start
编译apk,并运行到模拟器, 需要配置好Android开发的环境变量(ANDROID_HOME, GRADLE_HOME )
$ react-native run-android
做一些修改
* Sample React Native App
* /facebook/react-native
'use strict';
var React = require('react-native');
AppRegistry,
StyleSheet,
var AwesomeProject = React.createClass({
render: function() {
&View style={styles.container}&
&Text style={styles.welcome}&
Welcome to React Native!
&Text style={styles.instructions}&
To get started, edit index.android.js
&Text style={styles.reply}&
Yep, I do!
&Text style={styles.instructions}&
Shake or press menu button for dev menu
var styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
instructions: {
textAlign: 'center',
color: '#;,
marginBottom: 5,
// 添加style
color: '#e8801b',
fontSize: 20
AppRegistry.registerComponent('AwesomeProject', () =& AwesomeProject);
再次reload js, 可以通过菜单调出选项。
三、OSX上的环境搭建呵呵，不多说，上官网即可。1.环境需求OS X - 本向导假设您的操作系统是OS X，因为这是开发iOS应用所必须的。推荐使用Homebrew 来安装Watchman和Flow安装Node.js 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，推荐阅读npm的文档在命令行中输入brew install watchman，我们推荐安装watchman，否则你可能会遇到一个Node.js监视文件系统的BUG。如果你希望使用flow来为js代码加上类型检查，那么在命令行中输入brew install flow来安装flow。（译注：新手可以跳过这一步）我们推荐您定期运行brew update && brew upgrade来保持上述几个程序为最新版本。2.iOS开发环境准备你需要安装Xcode 7.0或者更高版本。你可以在App Store中找到并安装Xcode。译注：如果您选择从第三方网站/镜像下载Xcode，请务必从正规镜像网站下载验证文件Hash以防止类似XcodeGhost的安全风险发生，不要信任论坛、百度空间等分享渠道3.Android开发环境准备要使React Native应用支持Android，首先需要安装Android SDK (如果你不想连接安卓设备，那么还需要一个安卓模拟器)。参见 Android开发指南 了解如何搭建安卓开发环境。注： 现在Windows和Linux也在实验性的支持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
npm config set disturl https://npm.taobao.org/dist另，执行init时切记不要在前面加上sudo（否则新项目的目录所有者会变为root而不是当前用户，导致一系列权限问题，请使用chown修复）。本站论坛区提供了完整的绿色纯净新项目包。完整打包全部iOS和Android的第三方依赖，只要环境配置正确，无需科学上网漫长等待，解压即可直接运行。4.运行iOS应用$ cd AwesomeProject用XCode打开ios/AwesomeProject.xcodeproj并点击Run按钮。使用你喜欢的文本编辑器打开index.ios.js并随便改上几行。在iOS Emulator中按下?-R就可以刷新APP并看到你的最新修改！5.运行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应用！全栈技术(gh_dafe86d89b68)　
　文章为作者独立观点，不代表WtouTiao文章网立场
的最新文章
Hello，全栈技术Hello，全栈技术最近国内外都在流行一个词叫Full Stack，中文翻译过来叫全栈工程师，也叫全端工程师。什么是全栈开发者/index.php?r=Invitatio擅长Java语言的资深开发者们，多年以来多是工作在网页，服务器，和桌面系统等开发领域。这些领域的经验帮助他们建立起来了自己使用Java语言的模式和自己的Java库的生态系统。但是移动应用的开发却和这些领域的java开发有着天壤之别。
译注: 这是今年5月份React
Native刚发布的时候，在发布的环境搭建一、ReactJS简介React
起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaS从2014年到现在，React、jQuery和 Angular 的热度趋势对比，可以很明显的看到，React 在全球的热度趋势增长非常快。gh_dafe86d89b68全栈技术知识分享热门文章最新文章gh_dafe86d89b68全栈技术知识分享966,690 九月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
React-Native痛点解析之开发环境搭建及扩展
React-Native痛点解析之开发环境搭建及扩展
魏晓军、毛科杰
被首富的“一个亿”刷屏？不如定个小目标，先把握住的优惠吧！
Author Contacted
相关厂商内容
相关赞助商
为中小微企业提供！
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
InfoQ每周精要
通过个性化定制的新闻邮件、RSS Feeds和InfoQ业界邮件通知，保持您对感兴趣的社区内容的时刻关注。
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。03:39:13 UTC
app最基本功能 启动的时候判断是不是第一次启动，第一次启动的话跳到介绍页面，否则直接跳到首页，但是react-native的api我只看到异步存储，怎么能在取到值之后再进行跳转。。。。
09:17:54 UTC
异步存储够了啊，进来先 getItem，回调里如果拿到了值就跳转，否则就做该做的事，然后做完 setItem
01:14:44 UTC
但是每次都是页面跳转了才取到值，取值的方法放到componentWillMount 还是render都不能在跳转之前取到值，在render中把跳转页面的代码放到getItem的回调中的话，会报错return不能返回空，求救啊。。
04:57:32 UTC
关键的问题是在异步，可以设置state的状态isLoaded：false，然后render中判断是isLoaded不为true的时候，就显示loading状态或者什么都不显示，然后在componentDidMount中获取getItem，取完之后setState isLoaded=true，走后面的sence。