ReactNaviet开发——环境搭建
安装开发工具
我使用的操作系统是:Window 10
- 安装git、nodejs。
- 在命令行窗口输入
npm install -g nrm
。安装nrm模块可以方便我们切换npm下载源。 - 在命令行输入
npm install -g npm@3
来安装npm 3。 - 输入npm install -g react-native-cli。
- 在Chrom应用商店浏览器安装React Developer Tools插件,供我们调试 (这一步可能需要科学上网),若果没办法翻墙的话,可以参考这种安装方法:https://github.com/facebook/react-devtools/blob/master/packages/react-devtools/README.md。
- 安装WebStrom、Android Studio、Android sdk等。
创建第一个项目
- 在本地硬盘找块空地考试我们的ReactNative之旅。
- 初始化项目:在命令行输入
react-native init Project01
。其中Project01
就是我们希望建立项目名称。(视网络状态,这一步可能需要花一点时间)。 - 进入到Project01项目目录,执行升级命令:
cd Project01
react-native upgrade
- 启动android虚拟机,或者使用真机。
- 如果是android5.0或者5.0以上版本,那么需要在命令行输入
adb reverse tcp:8081 tcp:8081
。执行这条命令。这条命令的作用是通过adb反向代理端口,将调试电脑的8081端口反向代理到测试机上。 - 记得让测试机和电脑处于同一个网络哦。
- 在安装目录下输入:
react-native run-android
- 最后项目就运行成功了。
- 按菜单键可以出现一个弹窗,里面包含设置重新加载,和开放相关的信息。(现在好多手机都没有了菜单键、哎~,如果是模拟器的话,可以按快捷键Ctrl + M)
使用WebStrom创建项目
使用WebStrom -> New ->Project->React Native 就可创建一个项目了,等待创建完成之后点击运行小按钮就可以直接运行在手机上了。(这玩意好用多了)
最后我们随便更改一下,index.android.js代码,不用重新运行,在Android机上Reload一下就可以了。
学习资料
中文文档:http://reactnative.cn/docs/0.44/using-a-scrollview.html#content
英文文档:https://facebook.github.io/react-native/docs/getting-started.html