RN环境搭建

一、开发环境搭建

1. 基础环境

• 通过brew安装Node.js
• 使用npm安装yarn npm install -g yarn （-g 代表全局安装）

2. react项目环境

• 任意目录下创建package.json文件并配置好rn依赖
• 安装react项目依赖（yarn install）

3. 原生项目集成

• 原生工程根目录下创建package.json文件并配置好rn依赖
• 安装依赖（pod install/sync gradle）

环境搭建参考 RN境搭建
集成到应用 集成到现有应用

二、创建模板工程

• 使用 npx react-native init YourProjectName 创建一个模版工程
• 切换到根目录执行 yarn start 开启调试服务
• ios工程：切换到ios目录下执行pod install 安装依赖
• 安卓工程：使用android studio打开项目并 sync gradle

三、创建自己的开发工程

react端步骤

1. 创建工程
2. 根目录下执行npm init创建package.json并添加 rn依赖并执行 yarn install
3. 创建index.js文件（入口文件）,编写UI组件
4. 入口文件导入需要展示的视图，并注册到AppRegistry
5. 启动node服务(或者打包成bundle）

package.json模板：

{
 "name": "proj-NAME",
 "version": "0.0.2",
 "description": "Short Desc",
 "private": true,
 "main": "index.js",
 "repository": {
  "type": "git",
  "url": "https://xxx.git"
 },
 "scripts": {
  "start": "react-native start"
 },
 "dependencies": {
  "react": "16.13.1",
  "react-native": "0.63.4",
  "react-native-dynamic": "1.0.0",
  "and so on" : "x.x.x"
 },
 "author": "xxx",
 "license": "ISC"
}

native端步骤

1. 创建工程
2. 根目录下执行npm init创建package.json并添加 rn依赖并执行 yarn install
3. 拷贝模版代码中的pod(ios ) 或 gradle (android)配置文件内容到工程中的配置文件
4. IOS项目还需要在podfile目录下执行pod install,工程项目中还需要配置info.plist(根据运行错误提示配置即可）
5. 编写容器加载JS代码

pod模板：

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, '11.0'
use_frameworks!

target 'Project' do
    config = use_native_modules!
    use_react_native!(:path => config["reactNativePath"])
    
    pod 'AFNetworking', '~> 4.0.1'
end

四、添加第三方依赖库

React端

1. package.json中依赖需要的第三方库
2. yarn install 第三方库到本地
3. react代码中使用 import XXX from ‘第三方库名称’ 导入第三方库模块

Native端

1. 原生工程package.json中依赖需要的第三方库
2. Yarn install 第三方库到本地
3. ios执行pod install ，安卓执行gradle sync，会自动在项目中集成该第三方库（autolinking机制）

例子

yarn info ku 查看第三方库信息
yarn add react-native-localize 添加第三方