在原有的项目中支持 React Native
关键概念
- 设置React Native项目依赖和目录结构。
- 了解React Native组件,以及如何使用。
- 使用CocoaPods添加这些组件依赖关系。
- 在JavaScript开发React Native组件。
- 将RCTRootView添加到你的iOS应用程序。
- 这种观点将作为您的React Native组件的容器。
- 启动React Native服务器和运行您的APP程序。
- 验证应用程序的React Native方面是否按预期运行。
前提准备
- 调整文件结构
- 安装 javascript 依赖
在项目的根目录新建文件 package.json, 内容为:
{
"name": "ReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
}
}
- 安装 pods 依赖
use_frameworks!
platform :ios,'9.0'
target 'NativeApp' 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',
'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
'RCTText',
'RCTNetwork',
'RCTWebSocket', # needed for debugging
'CxxBridge',
# 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'
target 'NativeApp_Tests' do
inherit! :search_paths
end
end
def remove_unused_yoga_headers
filepath = './Pods/Target Support Files/yoga/yoga-umbrella.h'
contents = []
file = File.open(filepath, 'r')
file.each_line do | line |
contents << line
end
file.close
contents.delete_at(14) # #import "YGNodePrint.h"
contents.delete_at(14) # #import "Yoga-internal.h"
file = File.open(filepath, 'w') do |f|
f.puts(contents)
end
end
post_install do | installer |
remove_unused_yoga_headers
# 处理 Swift 警告
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['SWIFT_VERSION'] = '4.0'
end
end
end
执行 pod install 或 pod update
创建 react native server 文件
创建 index.js
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
class RNHighScores extends [React.Component](http://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,
},
});
// Module name
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
启动服务 npm start
在Native APP添加本地加载的方法,通过 RCTRootView 加载视图
NSURL *jsCodeLocation = [NSURL URLWithString:@"[http://localhost:8081/hello.bundle?platform=ios](http://localhost:8081/hello.bundle?platform=ios)"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
moduleName: @"RNHighScores"
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];
Enjoy coding!