导航
导航
文章目录
  1. 安装流程
    1. 必须软件
      1. 1.Chocolatey
      2. 2.Python 2
      3. 3.Node
      4. 4.Yarn、React Native的命令行工具（react-native-cli）
      5. 5.Android Studio
        1. 至此，环境搭建初步完成
  • 测试

    • ReactNative环境搭建

    2018.01.19 Robin Android / ReactNative  热度 ℃

    为什么写这篇，网上的RN环境搭建教程很多，但是基本上都是copy来copy去，在搭建过程中还是有不少坑，虽然不是特别大的坑，但是对于初学者每个都要去谷歌找答案，很费时间。在此记录整个环境搭建过程，以及遇到的问题，俗称“坑”

    安装流程

    本次安装环境基于Windows10,安装ReactNative版本基于0.51

    ps:访问困难的，请自备梯子

    必须软件

    1.Chocolatey

    Chocolatey是一个Windows上的包管理器，类似于linux上的yum和 apt-get。 你可以在其官方网站上查看具体的使用说明。一般的安装步骤应该是下面这样：

    @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

    win+x打开菜单，选择“命令提示符（管理员）”，打开管理员dos窗口，复制以上命令，回车，等待安装完成。你可以输入choco -v，正确输出版本号的话，安装正常

    2.Python 2

    打开命令提示符窗口，使用Chocolatey来安装Python 2.（注意目前不支持Python 3版本。）

    choco install python2

    命令窗口中输入以上命令，等待下载安装

    3.Node

    打开命令提示符窗口，使用Chocolatey来安装NodeJS。

    choco install nodejs.install

    命令行输入以上命令，等待下载安装

    安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！

    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global

    命令行继续输入以上命令。如果无法识别npm命令，关闭dos窗口，重新打开新的dos窗口，输入以上命令，因为环境变量自动配置以后，旧的dos窗口无法识别

    4.Yarn、React Native的命令行工具（react-native-cli）

    Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

    npm install -g yarn react-native-cli

    命令行输入以上命令，等待下载安装

    安装完yarn后同理也要设置镜像源：

    yarn config set registry https://registry.npm.taobao.org --global
    yarn config set disturl https://npm.taobao.org/dist --global

    命令行继续输入以上命令

    5.Android Studio

    没什么好说的，这个搞不定，也别整什么RN了。
    需要注意的是：React Native目前需要Android Studio2.0或更高版本。JDK用1.8就好

    配置下Android的环境变量，这里我遇到的问题是Android环境变量被自动移除了，不知道是不是因为安装以上软件的时候影响的，因为我之前设置过了Android环境变量，后面运行的报错，才发现adb命令都执行不了，所以重新检查设置下Android环境变量，至于怎么设置，自行搜索

    至此，环境搭建初步完成

    测试

    连上手机
    使用adb devices查看手机是否连接正常

    关闭掉管理员dos窗口，因为其定位目录为C：Windows\System32目录,会有一些权限相关的设置，不方便我们在此目录测试，运行的时候会build faild

    随便找个盘，新建一个workspace，打开dos窗口，这里你也可以用git bash命令窗口，如果你安装了git的话。

    初始化测试项目

    react-native init AwesomeProject

    进入项目目录

    cd AwesomeProject

    编译运行Android项目

    react-native run-android

    等待编译运行，运行到手机上后，如果出现红屏，并显示
    Unable to load script from assets index.android.bundle on windows

    解决方法：打开项目目录，进入android/app/src/main目录，新建一个assets目录，然后在项目根目录中，命令行输入

    react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

    完事再次输入运行命令，编译运行

    react-native run-android

    成功部署后显示：

    再测试下更新，命令行启动RN服务

    react-native start

    在项目的根目录中，找到App.js,打开修改下，保存。然后在手机上按菜单键呼出弹窗（你也可以摇动手机呼出）选择第一项Reload就会看到刚才做的修改

    转载请指明出处RobinBlog：http://robinx.net/2018/01/19/ReactNative环境搭建/