RN入门-01-环境搭建

环境搭建（操作系统Mac-10.13.4 ）

一：软件安装

1.1 Homebred

Homebrew, Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

译注：在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：

sudo chown -R 'whoami' /usr/local

1.2 Node 使用Homebrew来安装Node.js. React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本，一般都满足要求。

brew install node

安装完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

1.3 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

如果你看到EACCES: permission denied这样的权限报错，那么请参照上文的homebrew译注，修复/usr/local目录的所有权：

sudo chown -R 'whoami' /usr/local

安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。Yarn常用命令

--------------至此RN开发环境搭建完成，接下来创建第一个RN应用程序HelloRNProject --------------

二创建首个RN项目(Android)

2.1 在Documents下面使用如下命令创建一个HelloRNProject项目

react-native init HelloRNProject

执行上述命令之后会在workspace目录下面：

新建了 HelloRNProject 文件夹
创建 package.json 文件
npm install --save react-native 运行

该命令

安装了 react native 及其相关依赖.可以在 node-modules 目录中找到.
在 package.json 中声明 react native
安装全局的命令行工具(cli).并且将控制权交给本地的 cli(本地的 cli 在 node_modules/react-native/local-cli/cli.js 文件)
创建 ios 和 android 工程文件.

2.2 接下来运行刚才创建的RN项目（切换到RN项目根目录执行如下指令）

react-native run-android

此时一个鲜红的错误抛在眼前

Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:

从字面上看就是连接不到模拟器或者是手机，或者环境变量未配置造成这种情况有很多原因。在github上找到解决方法：（从我的解决方式来看，是我的环境变量未配置）在RN项目的android目录下创建一个local.properties文件，并指定SDK的目录

sdk.dir=/Users/xxxx/Library/Android/sdk         (xxxx为你当前用户名称)

或者直接在以往正常Android项目根目录下Copy一份 local.properties 文件到 RN项目内android下面

再次执行

react-native run-android

等待编译安装，可见成功安装

但是又有问题出现设备上出现满屏的红幕，Unable to load script from assets "index.android.bundle" 吧啦吧啦。。。。

此种情况原因没有找到assets下 "index.android.bundle"文件，解决方案有两种：

启动RN服务在线测试 ,进入RN根目录启动服务

npm start

摇晃手机弹出RN对话框选择Dev Setting 进入设置页面选择Debug service host & port for device 设置与PC一致的IP,端口为8081，例如：192.168.2.2:8081，然后重新Reload即可(如果还不行使用方案二如下)

使用 React-native bundle 打出离线bundle包

进入RN项目的android目录下面，在src/main下面创建assets目录（用户存放RN离线bundle包），在RN项目根目录使用命令打出离线bundle包。

React-native bundle --entry-file index.js --bundle-output ./RN项目跟目录下的Native module名称/app/src/main/assets/index.android.bundle --platform android --assets-dest ./RN项目跟目录下的Native module名称/app/src/main/res/ --dev false

其中“RN项目跟目录下的Native module名称”替换为自己RN下面的Native名称比如案例里面是 android执行之后编译生成我们目标文件

然后重新执行指令

react-native run-android

第一个HelloRNProject运行成功

参考文章 React Native中文网

RN入门-01-环境搭建

猜你喜欢