RN集成原生应用文档
在集成的过程当中，发现相关的文档官网并没有及时更新，也遇到了很多的问题，特别是关于Podfile文件的配置，查阅了很多相关的资料，最终进行了梳理。
目前所使用到的环境版本为：环境：Xcode12.5.1 、Cocoapods 1.11.0、React Native 0.66.1、React 17.0.2 、配置的 iOS deployment target 为 11.0
有任何问题可以评论，相互讨论和学习；也希望大家在集成的过程中能够一路畅通
React Native 组件集成到iOS主要分为一下几个步骤：
- 配置好 React Native 依赖和项目结构。
- 了解你要集成的 React Native 组件。
- 使用 CocoaPods 把这些组件以依赖的形式加入到项目中。
- 创建 js 文件，编写 React Native 组件的 js 代码。
- 在应用中添加一个RCTRootView。这个RCTRootView正是用来承载你的 React Native 组件的容器。
- 启动 React Native 的 Packager 服务，运行应用。
- 验证这部分组件是否正常工作
开发环境的准备
搭建开发环境
1 配置项目目录结构
首先创建一个空目录用于存放 React Native 项目，然后在其中创建一个/ios子目录，把你现有的 iOS 项目拷贝到/ios子目录中。
2 安装 JavaScript 依赖包
在项目根目录下创建一个名为package.json的空文本文件，然后填入以下内容：
{
"name": "JJOCRNDemo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "yarn react-native start",
"ios": "yarn react-native run-ios"
}
}
接下来我们使用 yarn 或 npm（两者都是 node 的包管理器）来安装 React 和 React Native 模块。请打开一个终端/命令提示行，进入到项目目录中（即包含有 package.json 文件的目录），然后运行下列命令来安装
$ yarn add react-native
这个样默认会安装最新的React Native, 同时会打赢出类似的警告信息
warning " > [email protected]" has unmet peer dependency "[email protected]".
这是正常现象，意味着我们还需要安装指定版本的 React:
$ yarn add [email protected]
注意必须严格匹配警告信息中所列出的版本，高了或者低了都不可以。
所有 JavaScript 依赖模块都会被安装到项目根目录下的node_modules/目录中（这个目录我们原则上不复制、不移动、不修改、不上传，随用随装）。
把node_modules/目录记录到.gitignore文件中（即不上传到版本控制系统，只保留在本地）。
3. 安装 CocoaPods
$ brew install cocoapods
配置CocoaPods依赖
React Native 框架整体是作为 node 模块安装到项目中的。下一步我们需要在 CocoaPods 的Podfile中指定我们所需要使用的"subspecs"。
可用的subspec都列在node_modules/react-native/React.podspec中，基本都是按其功能命名的。一般来说你首先需要添加Core，这一subspec包含了必须的AppRegistry、StyleSheet、View以及其他的一些 React Native 核心库。如果你想使用 React Native 的Text库（即RCTText的subspec。同理，Image需要加入RCTImage，等等。
我们需要在Podfile文件中指定所需的subspec。创建Podfile的最简单的方式就是在/ios子目录中使用 CocoaPods 的init命令：
$ pod init
注意：RN 0.63.0之后podfile格式官方文档错误，无法正确的pod install。下方为修改过后的Podfile文件
环境：Xcode12.5.1 、Cocoapods 1.11.0、React Native 0.66.1、React 17.0.2
iOS deployment target 11.0
Podfile会创建在执行命令的目录中。你需要调整其内容以满足你的集成需求。调整后的Podfile的内容看起来类似下面这样（也可以用npx react-native init 项目名命令创建一个纯 RN 项目，然后去参考其 ios 目录中的 Podfile 文件）：
# Uncomment the next line to define a global platform for your project
# rn relative path
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
require_relative '../node_modules/react-native/scripts/react_native_pods'
platform :ios, '11.0'
target 'JJOCRNDemo' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
# Pods for JJOCRNDemo
# react-native 需要的相关配置
config = use_native_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` and then install pods
:hermes_enabled => false
)
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
# use_flipper!()
post_install do |installer|
react_native_post_install(installer)
end
# 如果使用use_frameworks!需要添加这一部分，如果不使用则不需要（非常重要）
pre_install do |installer|
Pod::Installer::Xcode::TargetValidator.send(:define_method,
:verify_no_static_framework_transitive_dependencies) {}
end
target 'JJOCRNDemoTests' do
inherit! :search_paths
# Pods for testing
end
target 'JJOCRNDemoUITests' do
# Pods for testing
end
end
创建好了Podfile后，就可以开始安装 React Native 的 pod 包了。
$ pod install
4 编写js代码
首先在项目根目录下创建一个空的index.js文件。代码如下
import React from 'react';
import { AppRegistry, View, StyleSheet, Text } from 'react-native'
const JJXRnDemo = (props) => {
//字典
// const sourceDict = props.sourceDict
return(
{`main view`}
{props.sourceDict.info}
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#16a5af",
},
vertical: {
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
},
verticalTopMargin: {
marginTop: 15
}
});
AppRegistry.registerComponent('JJXRnDemo', ()=>JJXRnDemo);
5 编写RCTRootView代码
1导入头文件
#import
2 编写代码
NSString *str = @"http://localhost:8081/index.bundle?platform=ios";
NSDictionary *options = @{};
NSURL *url = [NSURL URLWithString:str];
NSString *moduleName = @"JJXRnDemo";
NSDictionary *dict = @{@"sourceDict":@{@"info":@"哈哈哈哈，我还是哈哈哈",@"title":@"心情"}};
self.rootView = [[RCTRootView alloc] initWithBundleURL:url
moduleName:moduleName
initialProperties:dict
launchOptions:options];
self.rootView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.rootView];
[self.rootView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor].active = YES;;
[self.rootView.centerYAnchor constraintEqualToAnchor:self.view.centerYAnchor].active = YES;
[self.rootView.heightAnchor constraintEqualToConstant:100].active = YES;
[self.rootView.widthAnchor constraintEqualToConstant:100].active = YES;
3 配置info.plist文件
由于使用的是http，而非https，所以需要在info.plist文件去配置允许http
NSAppTransportSecurity
NSAllowsArbitraryLoads
6 启动 React Native 的 Packager 服务，运行应用
在项目根目录运行命令：
$ yarn start
$ yarn ios