在创建一个react native 的project之前请先搭建好react native的环境。很简单安装好nodejs 就可以了,官网链接 安装nodejs ,官网推荐windows 用户用 Chocolatey这个包管理工具进行安装。这里我需要插句话,这个Chocolatey确实很好用,但是它会污染windows里面的powershell,对于github 客户端玩 git 的用户就样当心了,当你用完了Chocolatey,请及时将它卸载。
搭建完成react native的环境,理论上就可以用npm创建react native的项目了。先别着急,因为npm从官网下载node_modules太慢了,我们需要做一下淘宝的镜像。在自己的用户目录下找到.npmrc添加 registry = https://registry.npm.taobao.org即可。如下图:
当然还有其他的方法做淘宝的镜像,请参阅这个链接 npm建立淘宝服务器 。
言归正转, 用命令行进入你想放react native路径,执行 react-native init xxx
当命令行里出现一下信息,就说明我们的react native的项目创建成功。
此时,我们可以运行react-native run-ios,和react-native run-android分别在iphone和Android手机上运行了。这样运行对于我们计划完成集成的大业显然帮助不大。我们用AndroidStudio将项目导入进行运行。
打开react native项目的目录,Androidstudio导入android目录。
在项目中运行,会报出一下错误:
莫慌,我们最不怕的就是错误,看这错的意思是我们不能连接开发服务器,其还给出我们可能犯得错误类型。英语很厉害的你一看就知道说的什么。我就略微解释下,react native项目运行时会将index.andorid.js(index.ios.js)打成bundle文件放在本地的packager服务器上,端口是8081,在开启这个packager服务后,我们的手机页面就负责加载bundle文件进行显示。
1、连接手机跟电脑的8010端口,在命令行执行 adb reverse tcp:8081 tcp:8081
2、进入react native的项目的根目录(有package.json)的那一层,执行以下命令。npm start (react-native start也可以)。
接下来我们打开刚才安装的app,重新加载一下就页面就可以加载出以下页面
当加载出来这个页面是,你可以兴奋一下了,react native的页面加载成功了,在高兴之余,我们还需要冷静下来分析分析。可能有小伙伴可能会疑惑,packager 服务怎么用命令行就起来了呢?我的模拟器怎么加载不出来页面呢,我的手机是Android系统4.4的,怎么也不行呢?
关于packager的服务怎么起来延时的的,请打开react-native 根目录下的package.json
就是“start” 中的的命令起了关键的作用,当然你也可以进入node_modules/..../cli.js 钻牛角尖。
关于是安卓系统5.0以下手机 ,因为打开8010端口的权限是被系统拒绝的,所以你需要wifi调试,模拟器当然也是wifi调试。刚才我演示的是用USB连接真机进行的调试, 以下我说下wifi调试方法。
wifi调试:1、要保证手机和电脑处在相同的ip下;
2、在命令行执行上述的命令;
3、在晃动手机或者点击手机的menu键进行dev的设置;如下图:
接下来reload 页面内容加载js页面。