RN集成到现有原生应用-swift
1、配置项目目录结构
创建一个空文件夹命名为你RN项目名称，在里面再新建一个文件夹/ios，把你现有的swift项目全部拷贝到/ios文件夹内。
2、安装 JavaScript 依赖包
在项目根目录下创建一个名为package.json的空文本文件，内容如下：
{
"name": "SwiftRNProject",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "yarn react-native start"
}
}
3、安装React、React Native模块
接下来我们使用 yarn 或 npm（两者都是 node 的包管理器）来安装 React 和 React Native 模块。请打开一个终端/命令提示行，进入到项目目录中（即包含有 package.json 文件的目录），然后运行下列命令来安装：
$ yarn add react-native
这样默认会安装最新版本的 React Native，同时会打印出类似下面的警告信息（你可能需要滚动屏幕才能注意到）：warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".
这是正常现象，意味着我们还需要安装指定版本的 React：
$ yarn add react@16.2.0
注意必须严格匹配警告信息中所列出的版本，高了或者低了都不可以。如果你使用多个第三方依赖，可能这些第三方各自要求的 react 版本有所冲突，此时应优先满足react-native所需要的react版本。其他第三方能用则用，不能用则只能考虑选择其他库。
所有 JavaScript 依赖模块都会被安装到项目根目录下的node_modules/目录中（这个目录我们原则上不复制、不移动、不修改、不上传，随用随装）。
把node_modules/目录记录到.gitignore文件中（即不上传到版本控制系统，只保留在本地）。
4、配置 CocoaPods 的依赖
如果你的项目里面已经有了Podfile就直接配置，没有就创建：
$ pod init
Podfile会创建在执行命令的目录中。你需要调整其内容以满足你的集成需求。调整后的Podfile的内容看起来类似下面这样，下面是原生项目podfile必须添加的：
source 'https://github.com/CocoaPods/Specs.git'
# 对于Swift应用来说下面两句是必须的
platform :ios, '8.0'
use_frameworks!
# target的名字一般与你的项目名字相同
target 'swift-2048' do
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.47则加入此行
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 调试功能需要此模块
'RCTAnimation', # FlatList和原生动画功能需要此模块
# 在这里继续添加你所需要的其他RN模块
]
# 如果你的RN版本 >= 0.42.0，则加入下面这行
pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
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
创建好了Podfile后，就可以开始安装 React Native 的 pod 包了。
$ pod install
5、创建RN组件
首先在项目根目录下创建一个空的index.js文件。然后编写你的组件。例子如下：
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
class RNHighScores extends React.Component {
render() {
var contents = this.props['scores'].map((score) => (
<Text key={score.name}>
{score.name}:{score.value}
{'\n'}
</Text>
));
return (
<View style={styles.container}>
<Text style={styles.highScoresTitle}>2048 High Scores!</Text>
<Text style={styles.scores}>{contents}</Text>
</View>
);
}
}
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,
},
});
// 整体js模块的名称
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
RNHighScores是整体 js 模块（即你所有的 js 代码）的名称。你在 iOS 原生代码中添加 React Native 视图时会用到这个名称。
6、用RCTRootView加载RN组件
swift项目要先在桥接文件中导入#import <React/RCTRootView.h>
在ViewController中先随便添加一个按钮，并绑定点击事件:
@IBAction func highScoreButtonTapped(sender : UIButton) {
//这下面的jsCodeLocation是模拟器调试 如果是要真机调试一定要保证手机和电脑在同一个WiFi环境下，并把localhost替换为对应IP地址
//例如：let jsCodeLocation = URL(string: "http://192.168.79.90:8081/index.bundle?platform=ios")
let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios")
let mockData:NSDictionary = ["scores":
[
["name":"Alex", "value":"42"],
["name":"Joel", "value":"10"]
]
]
let rootView = RCTRootView(
bundleURL: jsCodeLocation,
moduleName: "RNHighScores",
initialProperties: mockData as [NSObject : AnyObject],
launchOptions: nil
)
let vc = UIViewController()
vc.view = rootView
self.present(vc, animated: true, completion: nil)
}
注意info.plist中设置App Transport Security
7、运行项目
要运行应用，首先需要启动开发服务器（即 Packager，它负责实时监测 js 文件的变动并实时打包，输出给客户端运行）。具体只需简单进入到项目根目录中，然后运行：
$ npm start
然后在Xcode中开始跑项目。
搞定收工！！！！！！！！！！！！
。。。
网友评论