现有的iOS项目里集成RN的支撑的大体结构, iOS运用集成RN的SDK，作业时加载预先打包好的jsBundle。
主要内容
在现有iOS工程集成React Native组件的主要内容有：
- 设置Reaapplect Native的依托库和目录结构。
- 了解项目所需求的React Nhttp署理ative组件。
- 运用CocoaPods 增加和处理这些组件。
- 运用JavaScript开发所需求的React Native组件。
- 增加React Native 组件的容器View –
RCRxcode是什么软件ootView - 敞开React Nativexcode运用服务器并作业本地工程。
- 验证React Native是否按预期作业。
前期准备
1. 设置目录结构
- 创立React Native 工程的文件夹, 如：
RNProject。 - 在React Native 工xcode怎样编写c言语程文件夹
RNPhttp 302roject中创立/ios文件夹。并将现有工程拷贝到/ios文件夹下。
2. 设备JavaScript依托
在React Native 工程文件夹RNProject根目录创立apple watchpackage.json文件，文件的内容如下：
{
"name"giti轮胎: "MyReactNativeAHTTPppapp store"xcode怎样编写c言语,
"version": "0.0.1",
"private": true,
"scriptsappointment": {
"start": "yarxcode10n react-nativeapple tv start"
}
}
翻开终端，进入对应React Nxcode教程ative工程目httpwatch录, 设备下react 和 react-native核心依托
npm install react react-http署理native
设备完成后，会在当时工application程目录创立一个新的/node_modules文件夹, 这个文件里存储Apple着当时工xcode10程所需的全部JavaScript依托appearance库。
最终，将node_modules/增加到iOS 工程的.giapprovetignore文件中。
这阶段目录结构如下：
3. Install CocoaPods
CocoaPods 是iOSgitee开发的一个包处理东西. 请自行设备gitee~。
增加React Native到App
1. 装备Cocoa Pods 依托
进入React Native工程的ios目录，批改Podfile文件（按照apple pay官网进程可能会报错，由于react的版别不同，装备不http 302同），内容如下 参看链接
require_relatXcodeive '../node_modules/react-native/sxcode中文criptappstores/react_native_pods'
require_relative '../node_modappreciateules/@react-native-community/cli-platform-ios/native_modules'
platform :ios, '10.0'
target 'RnDiffApp' do
config = use_natihttpwatchve_modules!
use_react_native!(
:path => config[:reactNativePath],
# to enable hermes on iOS, change `false` to `true` anhttpwatchd then install pods
:hermes_enabled => false
)
target 'RnDiffAppTests' do
inherit! :complete
# Pods for testing
end
# Enables Flipper.
#
# Note that if you have use_frameworks! enabled, Flipper will nappstoreot work and
# you shogitiuld disable the next line.
use_flipper!()
post_install do |installer|
react_native_post_install(installer)
end
end
批改完成后，实施pod install指令http 404。
2. 代码集成
1. 创立index.js文件
首要在React Native工xcode中文程的根目录创立index.js文件，index.js是React Native使http 500用程序的起点，一般来说是有必要的。
2. 增加React Native代码到index.js中
翻开index.js文件，将下xcode运用面代码拷贝到其中。github是干什么的
import React from 'react';
import {AppRegistry, StyleSheet, Text, View, Image} from 'react-native';
class RNTest extenxcode怎样编写c言语ds React.Component {
render() {
return (
<View stygit指令le={styles.container}>
<Text style={styles.title}>Hello</Text>apple pay
&lxcode10t;Image
style={sapple tvtyles.avatar}
sappetiteource={{uri: 'http://patpatwebstatic.s3.us-west-2.amazonaws.com/origin/other/cms/position/60ab6apple pay5http 302d1b20a2.jpg'}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
contahttpclientiner: {
display: 'flxcode教程ex',
alignItems: 'center',
marginTop: 60
},
title: {
fontSize: 20,
texcode10xtAlign: 'center',
color: '#333'
},
avatar: {
width: 300,
height: 300,
marginTop: 20
}
});
// Module namexcode下载
AppRegistry.registerComponent('RNTappetiteest', () =&ggitit; RNTest);
3. 运用RCTRootView加载显现index.js的内容
首要，在iOS文件中引进RCTRootView头文件
#import &lappointmentt;React/RCTRootView.h>
创立一个点击事情，实施testRNButappstoretonAction办法。
- (void)testRNButtonAction
{
NSLog(@"RNTest Button Pressed");
NSURL *jsCodeLocation = [NSURL URLWithStringapproach:@"http://localhost:8081/index.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] ixcode运用nitWiapp id注册thBundleURL: jsxcode是什么CodeLocation
moduleName: @"RNTest"
initialProperties:@{}
launchOptions: nil]xcode是什么软件;
UIViewController *vc = [[UIViewControlappleler alloc] init];
vc.view = rootView;
[self presentViewControlleappointmentr:vc animated:Ygiti轮胎ES completion:nil];
}
检验集成是否OK
1.增加运用程序运送安全反常
Appleapplication已阻遏隐式明码通讯 HTTP资源加载。httpwatch 因而，需求在iOS工程的info.plist文件中做一下装备。
<key>giti轮胎NSAppTranapp storesportSecurity</key>apple id;
<dict>
<key>NSEapprovexceptionDomains</key>
&giteelt;dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptiapple官网onAllowsInsecureHTTPLoads</key>
<true/xcode汽车>
</dihttp署理ctgithub中文官网网页>
</dict>
</dict>
2.作业包
要作业app工程，首要要建议React Native的开发服务器。 在React Nativapplicatione工程的根目录作业：
nHTTPpm start
建议成功如下：
如果报找不到yarn指令的差错，则需求设备一下yarn, 在github中文官网网页终端输入指令：
npmgithub是干什么的 install --global yarn
react native服务建议后，直接在Xcode中作业你的iOS工程，点击对appreciate应的按钮实施tgithub是干什么的estRNButtonAction办法，成功加载React Native的界面。
别的，你还能够通过指令行的办法作业你的工程：
npx react-native run-ios
装备进程遇到的问题
-
找不到对应React Native依托库问题： 如：No podsgithubpec found for
FBReactNativeSpecin../node_modules/react-native/Libraries/FBReacAPPtNatixcode下载veSpec -
node 相关问题解决： blog.csdn.netapple watch/xinghuowuzh…
参看链接：
- Integration with Existihttp 500ng Apps
