Mac 环境现有项目集成 RN环境

开发环境：mac 

rn版本：0.62.2

xcode版本：11.6

一、集成cocopods

参考文档：https://www.jianshu.com/p/6d51362b7e64

1.查看当前Ruby版本

ruby -v

2.升级Ruby环境，首先需要安装rvm（如果有就直接跳到第5步）

curl -L get.rvm.io | bash -s stable 
source ~/.bashrc
source ~/.bash_profile

3.查看rvm版本

显示如下
rvm 1.29.3 (latest) by Michal Papis, Piotr Kuczynski, Wayne E. Seguin [https://rvm.io]

4.列出ruby可安装的版本信息

rvm list known

显示如下所示

# MRI Rubies
[ruby-]1.8.6[-p420]
[ruby-]1.8.7[-head] # security released on head
[ruby-]1.9.1[-p431]
[ruby-]1.9.2[-p330]
[ruby-]1.9.3[-p551]
[ruby-]2.0.0[-p648]
[ruby-]2.1[.10]
[ruby-]2.2[.10]
[ruby-]2.3[.8]
[ruby-]2.4[.6]
[ruby-]2.5[.5]
[ruby-]2.6[.3]
[ruby-]2.7[.0-preview1]
ruby-head

5.更换ruby源

sudo gem update --system
gem sources --remove https://rubygems.org/
gem sources --add https://gems.ruby-china.com/

6.为了验证你的Ruby镜像是并且仅是ruby-china，执行以下命令查看

gem sources -l

如果是以下结果说明正确，如果有其他的请自行百度解决

*** CURRENT SOURCES ***

https://gems.ruby-china.com/

7.开始安装CocoaPods

sudo gem install -n /usr/local/bin cocoapods

8.如果安装了多个Xcode使用下面的命令选择（一般需要选择最近的Xcode版本）

sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer

9.再安装本地库

pod setup

 当出现Setup completed的时候说明已经完成了。

 

二、rn官方集成文档

参考文档：https://reactnative.cn/docs/getting-started.html

安装依赖：

1.Node, Watchman

brew install node
brew install watchman

Homebrew安装比较慢，就用npm安装

2.安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程

# 使用nrm工具切换淘宝源
npx nrm use taobao

# 如果之后需要切换回官方源可使用
npx nrm use npm

3.安装Yarn

npm install -g yarn

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

4.安装xcode

5.Xcode 的命令行工具：启动 Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具，比如git等。

 

三、rn集成到现有项目中

参考文档：https://reactnative.cn/docs/integration-with-existing-apps

1. 配置项目目录结构

首先创建一个空目录用于存放 React Native 项目，然后在其中创建一个/ios子目录，把你现有的 iOS 项目拷贝到/ios子目录中。

2. 安装 JavaScript 依赖包（已经有了，就不安装）

在项目根目录下创建一个名为package.json的空文本文件，然后填入以下内容：

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "yarn react-native start"
  }
}

3.安装 React 和 React Native 模块

yarn add react-native

这样默认会安装最新版本的 React Native，同时会打印出类似下面的警告信息（你可能需要滚动屏幕才能注意到）：

warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".

这是正常现象，意味着我们还需要安装指定版本的 React：

yarn add react@16.2.0

（或者安装指定版本的react-native）

yarn add react-native@0.62.2

4.安装react-native-cli（有时间了解一下cli是干嘛的）

yarn add react-native-cli

四、cocopods依赖库安装

1.创建Podfile的最简单的方式就是在/ios子目录中使用 CocoaPods 的init命令：（已经有了请忽略）

pod init

2.创建好了Podfile后，就可以开始安装 React Native 的 pod 包了。【在ios目录下安装】

pod install

五、xcode网络环境配置

1.在ios目录下运行下面命令，生成bundle文件

yarn react-native bundle --platform ios --entry-file index.js --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle  --dev false

2.找到IP

3.在项目中找到

4.把里面的IP替换掉

六、启动rn服务

npm start