一、首先搭建开发环境
按照官网的说明文档搭建好环境
http://reactnative.cn/docs/0.38/getting-started.html
大致步骤:
1、安装nodejs环境
brew install node
npmconfig set registry https://registry.npm.taobao.org --global
npmconfig set disturl https://npm.taobao.org/dist --global
2、安装jdk1.8*
可以到官网上下载,安装好后,通过如下命令查看java版本
javac -version
如果版本不对,可以手动在.bash_profile和.zshrc添加环境配置.
注意:如果是装了ohmyzsh,就要在.zshrc修改!!
1)打开文件
vi ~/.bash_profile
2)按i,把以下代码拷贝到文件中,然后按ESC退出编辑,输入:wq退出,
#java path
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_65.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH
3)执行source ~/.zshrc
3、安装Android Studio
按照教程里的步骤安装即可,安装好后,配置环境变量:
同第2步,:
#android sdk path
export ANDROID_HOME=~/Library/Android/sdk
export PATH=$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$PATH
通过控制台输入:
android
弹出androidJDK管理工具:
把要用的sdk Tool和Platform-tools下载安装。
4、安装react-native
npm install -g react-native-cli
安装好之后,可以命令行下就有react-native命令了
二、运行教程里的测试安装:
1)执行:react-native init AwesomeProject
大概需要5分钟左右,耐心等待。。
2)然后
cd AwesomeProject
react-native run-android
运行结果:
运行的时候,把手机连上,并且把手机里开发者选项->USB调试、USB安装等设置为可用。
手机显示为:
长按菜单键,显示调试页面。
如果不显示,进入手机:设置-》授权管理-》应用权限管理-》选择你运行的AwesomeProject应用-》点击“显示悬浮窗”
设置完成后,退出应用,重新进入,即可看到设置页面。
如果看到以下ReactNatibe经典报错UI:
注意Android5.0以下版本执行:
这是因为我们还未启动react-native的服务。
命令行中进入项目目录,输入react-native start进行构建,等待一段时间。
react-native start
注意这里不是使用run-android,run-android适用于直接在机器上运行调试app。
构建完毕,在浏览器中访问http://localhost:8081/index.android.bundle?platform=android,如果可以访问表示服务器端已经可以了。
我们摇一摇手机,点击Dev Settings后,点击Debug server host & port for device,设置IP和端口。
这里的IP是电脑的IP,端口号固定8081。
设置完成后,回到空白页面,再次摇一摇手机,选择Reload JS,程序就运行起来,出现Welcome to React Native!
注意Android5.0以上版本命令方式:
命令行执行:
adb reverse tcp:8081 tcp:8081
点击Reload JS 即可成功拉取ReactNative bundle。
windows系统,可以参考:http://blog.csdn.net/asmcvc/article/details/51683799