导航
导航
文章目录
  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环境搭建

    为什么写这篇,网上的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环境搭建/