React Native 之初体验-跑起一个hello world

        在创建一个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项目结构

          在项目中运行，会报出一下错误：

未能连接packager sever图

           莫慌，我们最不怕的就是错误，看这错的意思是我们不能连接开发服务器，其还给出我们可能犯得错误类型。英语很厉害的你一看就知道说的什么。我就略微解释下，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也可以)。

开启packager服务

     接下来我们打开刚才安装的app，重新加载一下就页面就可以加载出以下页面

  

hello world页面启动

      当加载出来这个页面是，你可以兴奋一下了，react native的页面加载成功了，在高兴之余，我们还需要冷静下来分析分析。可能有小伙伴可能会疑惑，packager  服务怎么用命令行就起来了呢？我的模拟器怎么加载不出来页面呢，我的手机是Android系统4.4的，怎么也不行呢？

    关于packager的服务怎么起来延时的的，请打开react-native 根目录下的package.json

script s

就是“start” 中的的命令起了关键的作用，当然你也可以进入node_modules/..../cli.js 钻牛角尖。

    关于是安卓系统5.0以下手机 ，因为打开8010端口的权限是被系统拒绝的，所以你需要wifi调试，模拟器当然也是wifi调试。刚才我演示的是用USB连接真机进行的调试， 以下我说下wifi调试方法。

     wifi调试：1、要保证手机和电脑处在相同的ip下；

                         2、在命令行执行上述的命令；

                           3、在晃动手机或者点击手机的menu键进行dev的设置；如下图：

wifi调试设置

            接下来reload  页面内容加载js页面。