RN入门-01-环境搭建

目录

工具安装

1. Watchman

2. Node

3. Yarn、React Native

创建首个RN项目(Android)

扩展

1. React-Native iOS 真机测试详细流程

2. 解决XCode配置完appid后依然提示如下问题     

3. 解决安装cocoapods卡住问题

4. 通过Chrome调试RN

---

工具安装

1. Watchman

Watchman由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

brew install watchman

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

3. Yarn、React Native

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

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

创建首个RN项目(Android)

在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 工程文件.

接下来运行刚才创建的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为你当前用户名称)(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中文网

扩展

1. React-Native iOS 真机测试详细流程

     有可能需要用到 ios-deploy

2. 解决XCode配置完appid后依然提示如下问题     

The certificate used to sign "XX" has either expired or has been revoked. An updated certificate is required to sign and install the application

The identity used to sign the executable is no longer valid

3. 解决安装cocoapods卡住问题

在初始化rn项目时候有可能会遇到"info Installing required CocoaPods dependencies"一直卡住的情况，解决方案是替换gem默认的源

1.1 查看cocoapods安装路径

cd /usr/bin/

which pod

#输出cocoapods安装的路径
/usr/local/bin/pod

1.2 删除cocoadpos

sudo rm -rf /usr/local/bin/pod
password：输入密码回车

1.3 查看gem安装的工具

cd /usr/bin/

gem list


#安装的工具
#*** LOCAL GEMS ***
#activesupport (4.2.11.1)
#atomos (0.1.3)
#bigdecimal (1.2.8)
#CFPropertyList (3.0.1, 2.2.8)
#claide (1.0.3)
#cocoapods (1.7.5)
#cocoapods-core (1.7.5)
#cocoapods-deintegrate (1.0.4)
#cocoapods-downloader (1.2.2)
#cocoapods-plugins (1.0.0)
#cocoapods-search (1.0.0)
#cocoapods-stats (1.1.0)
#cocoapods-trunk (1.4.0)
#cocoapods-try (1.1.0)
#colored2 (3.1.2)
#concurrent-ruby (1.1.5)
#did_you_mean (1.0.0)
#...

1.4 删除gem安装的cocoapods工具

#卸载所有cocoapods系列工具
sudo gem uninstall cocoapods cocoapods-core ...

1.5 查看是否卸载干净

gem list

1.6 查看gem源地址

gem sources -l

#输出gem源
*** CURRENT SOURCES ***
https://rubygems.org/

1.6 删除gem默认的源地址，添加新的地址

#需要科学上网
sudo gem update --system   

#移除gem默认源
gem sources --remove https://rubygems.org/

#添加新的地址
gem sources --add https://gems.ruby-china.com/

1.7 查看源是否设置成功

#查看gem设置后的源地址，确保只有ruby-china.com这一个源
gem sources -l

#输出gem源
*** CURRENT SOURCES ***
https://gems.ruby-china.com/

1.8使用gem安装cocoapods和初始化环境

#1 安装cocoapods
sudo gem install cocoapods
...
...
...
完成后

#2 初始化cocoapods环境
pod setup

4. 通过Chrome调试RN

iOS

模拟器

说明： 可直接调试，无需特殊配置。

真机

• 先直接选择远程调试，如果失败，继续下列步骤
• 用Xcode打开项目工程
• 选择Libraries
• 选择RCTWebSocket.xcodeproj
• 选择RCTWebSocketExecutor.m
• 搜索@"localhost"
• 将@"localhost"替换成你的电脑IP，例如：@“192.168.0.1”

Android

模拟器 && 真机

说明： 一般打开远程调试会提示：Unable to round-trip http request to upstream: dial tcp 10.0.2.2:8081: i/o timeout

遵循以下步骤：

• 先打开Chrome浏览器，然后打开：http://localhost:8081/debugger-ui
• 然后重新执行： react-native run-android
• 如果以上还不行，则先尝试：adb reverse tcp:8081 tcp:8081 (确保手机通过USB连接电脑，可通过: adb devices查看是否已连接。然后实现从设备到电脑的端口转发）
• 再次执行：react-native run-android
• app上选择进入Debug

chrome上可对我们RN应用进行调试

 

闲暇之余写了个小程序，欢迎大家扫码使用