一、参照官方步骤进行集成
1. 先参照官方流程，把要用到的环境安装一下
- 搭建开发环境
2. 在尝试官方集成方法，尝试集成
- 集成到现有原生应用
- 因为官方的版本一直在升级，而文档却没升级，所以我继承失败了
二、自己摸索的集成过程
1. 也需要确保各种环境安装成功
- 搭建开发环境
2. 创建一个原生的 OC 项目，项目名是 iOSProject，整个目录结构如下
目录结构如上
3. 创建 package.json 文件内容如下，并执行 npm install 命令
{
"name": "MyReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.8.3",
"react-native": "0.59.0"
}
}
warning "[email protected]" has unmet peer dependency "[email protected]".
- 如果遇到上面的警告⚠️（
通常都会遇到），那么需要添加指定的版本的react，使用如下命令
yarn add [email protected]
4. node_modules 安装成功后，Demo_worked_1 目录下创建 index.ios.js 和 AAA.js 文件
-
index.ios.js文件内容如下
import {
AppRegistry
} from 'react-native'
import A from './AAA'
AppRegistry.registerComponent('Aname', () => A)
-
AAA.js文件内容如下
import React from 'react';
import { StyleSheet, Text, View} from 'react-native';
export default class AAA extends React.Component {
render() {
var contents = this.props['scores'].map((score) => (
{score.name}:{score.value}
{'\n'}
));
return (
2048 High Scores!
{contents}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
5. 在 iOS 项目下，添加 Podfile 文件，并加入如下内容
platform :ios, '9.0'
target 'iOSProject' do
# Pods for myRactNative
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # Include this for RN >= 0.47
'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
'RCTText',
'RCTNetwork',
'RCTWebSocket', # Needed for debugging
'RCTAnimation', # Needed for FlatList and animations running on native UI thread
# Add any other subspecs you want to use in your project
]
# Explicitly include Yoga if you are using RN >= 0.42.0
pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
# Third party deps podspec link
pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
end
- 执行
pod install命令，安装依赖库
由于国内网络环境，有些库很难安装成功，只能自行找办法解决⚠️
6. 回到 Demo_worked_1 目录下，执行 yarn start 命令（启动 RN 本地网络），会看到如下提示
image.png
7.打开 Xcode，配置info.plist 的运行 http 运行访问权限
image.png
8. 为 iOS 项目添加如下代码
- (void)testRN {
NSLog(@"RN");
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
// jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
moduleName: @"Aname"
initialProperties:
@{
@"scores" : @[
@{
@"name" : @"Alex",
@"value": @"42"
},
@{
@"name" : @"Joel",
@"value": @"10"
}
]
}
launchOptions: nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
}
image.png
9. 这时候直接Xcode 运行项目，很可能会报错：
Xcode版本问题：Unknown argument type ‘attribute‘ in method -[RCTAppState getCurrentAppState:error:].
更改如下代码
image.png
- 最终改成下面的代码
static BOOL RCTParseUnused(const char **input)
{
return RCTReadString(input, "attribute((unused))") ||
RCTReadString(input, "__attribute__((__unused__))") ||
RCTReadString(input, "__unused");
}
10. 再次运行，看到如下页面，就代表集成成功了
image.png
三、如果要打包 iOS 应用了，下面的命令你肯定用得着
1. 导出js bundle的命令
在执行打包命令之前，我们需要先确保在我们项目的根目录有release_ios文件夹，没有的话创建一个。此文件夹与RN项目下的ios与Android文件夹同等级。
- 然后RN项目的根目录下执行下面的命令
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/
--entry-file ,ios或者android入口的js名称，比如index.js(老版本的RN项目的默认入口文件是index.ios.js)
--platform ,平台名称(ios或者android)
--dev,设置为false的时候将会对JavaScript代码进行优化处理。
--bundle-output, 生成的jsbundle文件的名称，比如release_ios/main.jsbundle (老版本的RN项目是区分iOS和android的，要改为index.ios.jsbundle)
--assets-dest 图片以及其他资源存放的目录,比如release_ios
- 然后在项目中用如下命令导入 js，就可以不依赖本地网络环境了
NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"jsbundle"];