给iOS开发者的ReactNative⼊门使⽤教程
⽬录
⼀. 原⽣iOS项⽬集成React Native
1. 创建⼀个新的⽂件夹，如RNProject，然后新建⼀个/ios的⼦⽂件夹，将已有的iOS项⽬全部⽂件复制进去。
2. 在RNProject根⽬录创建package.json⽂件，内容如下：
{
"name": "RNProject",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "yarn react-native start"
}
}
3. 打开终端，cd到项⽬根⽬录，执⾏以下命令集成React Native模块：
$ yarn add react-native
4. 等待上⼀步完成后，注意红框内的提⽰，表⽰需要依赖指定版本的react。我们以下命令集成react，注意版本号需要严格按照提⽰的
要求：
$ yarn add react@16.8.3
此时所有集成的依赖都在node_modules/⽬录下，做git版本控制时，不应该上传此⽂件夹的所有⽂件，⽽是让其他协作者也执 ⾏以上命令来添加依赖。因此应该将node_modules/⽬录记录到.gitignore⽂件中。
6. 通过cocoaPods将React Native集成到iOS项⽬中。默认你已经熟悉并安装了cocoaPods。在终端中，cd到/ios⽬录下，初始化
cocoaPods：
$ pod init
打开Podfile⽂件，编辑为如下内容：
# The target name is most likely the name of your project.
target 'RNProject' do
# Your 'node_modules' directory is probably in the root of your project,
# but if not, adjust the `:path` accordingly
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',
'RCTImage',
'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
注意target ‘RNProject’ do中为iOS项⽬的名称，⽽不是根⽬录名称，只是这⾥我的根⽬录和iOS项⽬名称均为RNProject。
保存Podfile后，执⾏以下命令开始安装：
$ pod install
⾄此，就已经成功在已有iOS项⽬中集成了RN，项⽬⽂件结构如下：
⼆. 原⽣跳转RN页⾯
1. 苹果会阻⽌访问不安全的HTTP链接。我们需要在iOS项⽬的Info.plist的中添加：
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
2. 在根⽬录下创建index.js⽂件，作为React Native在iOS上的⼊⼝⽂件。并输⼊以下内容：
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
reactnativeui框架class Hello extends React.Component {
render() {
var {name} = this.props
return (
<View style={{flex: 1,justifyContent: 'center',alignItems: 'center'}}>
<Text>Hello {name}!</Text>
</View>
);
}
}
3. 在Xcode中，创建⼀个ViewController，并输⼊以下内容：
#import "ViewController.h"
#import <React/RCTRootView.h>
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 200, 50)];
< = ;
[button setTitle:@"跳转RN" forState:0];
[button setTitleColor:[UIColor greenColor] forState:0];
[button addTarget:self action:@selector(clickButton:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button];
}
- (void)clickButton:(UIButton*)button{
NSURL *jsCodeLocation = [NSURL URLWithString:@"localhost:8081/index.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
moduleName: @"Hello"
initialProperties: @{@"name":@"React Native"}
launchOptions: nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
}
@end
4. 在根⽬录使⽤以下命令启动RN Packager
npm start
5. 在Xcode中运⾏项⽬，运⾏后点击“跳转RN”后，既会跳转到RN实现的显⽰Hello React Native！的页⾯：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。