关于React-Native
React-Native号称是跨平台开发且具有原生应用的体验，早在两年前我曾经尝试过使用React-Native，但是环境搭建过程及其复杂，可参见我之前写的文章：iOS现有项目手动集成ReactNative。最近公司新开项目需要实现iOS和Android平台热更新方案，以便快速开展业务。本文用来梳理React-Native在iOS上的一些实践。包括如下内容：
- 搭建一个React-Native项目。
- 现有iOS项目中集成React-Native模块。
- 以bundle的形式在真机上运行React-Native。
- 热更新中bundle的拆分。
由于React-Native项目一直在更新，不同的版本在使用的过程中会遇到不同的问题，所以强烈建议你使用英文官方文档作为开发参考。
搭建一个React-Native项目
根据React-Native的官方文档一路能一路很顺利的搭建成功。我这里简单说一下主要步骤，详细可参考：安装文档
-
安装依赖，包括Node、Watchman、React Native命令行界面、Xcode。
- 建议使用homebrew安装node和Watchman
brew install node brew install watchman- 安装 React Native CLI
npm install -g react-native-cli- Xcode，作为一个iOS开发，就不多说了。
-
创建项目
react-native init AwesomeProject -
运行项目
cd AwesomeProject react-native run-ios 如果顺利的话你可以看到你的第一个React-Native项目了。
集成React Native到现有项目
同样我建议你参考官方文档，我现有项目是Swift，你可以根据你的项目情况选择对应的安装方法。
- 调整项目结构如下，新建iOS目录，将iOS相关的代码都放到iOS目录下。
- 在iOS同级目录下创建
package.json文件
{
"name": "MyReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"postinstall": "sed -i '' 's/#import /#import /' ./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h; sed -i '' 's/#import /#import /' ./node_modules/react-native/Libraries/WebSocket/RCTReconnectingWebSocket.m"
},
"dependencies": {
"react": "^16.4.0",
"react-native": "^0.55.4"
}
}
- 安装yarn
brew install yarn
- 安装React-native
yarn add react-native
如果出现警告
warning "[email protected]" has unmet peer dependency "[email protected]".
则你需要安装React
yarn add react@version_printed_above // version_printed_above 具体版本号
- 在iOS目录里添加podfile文件
# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'
target 'ReactDemo' do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!
# Pods for ReactDemo
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
Add any other subspecs you want to use in your project
]
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 'ReactDemoTests' do
inherit! :search_paths
# Pods for testing
end
target 'ReactDemoUITests' do
inherit! :search_paths
# Pods for testing
end
end
def fix_cplusplus_header_compiler_error
filepath = '../node_modules/react-native/React/Base/Surface/SurfaceHostingView/RCTSurfaceSizeMeasureMode.h'
contents = []
file = File.open(filepath, 'r')
file.each_line do | line |
contents << line
end
file.close
if contents[32].include? "&"
contents.insert(26, "#ifdef __cplusplus")
contents[36] = "#endif"
file = File.open(filepath, 'w') do |f|
f.puts(contents)
end
end
end
def fix_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
if contents[12].include? "Utils.h"
contents.delete_at(15) # #import "YGNode.h"
contents.delete_at(15) # #import "YGNodePrint.h"
contents.delete_at(15) # #import "Yoga-internal.h"
contents.delete_at(12) # #import "Utils.h"
file = File.open(filepath, 'w') do |f|
f.puts(contents)
end
end
end
def react_native_fix
fix_cplusplus_header_compiler_error
fix_unused_yoga_headers
end
post_install do |installer|
react_native_fix
end
执行pod install命令。
- 在iOS同级目录创建index.ios.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) => (
{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);
- 在iOS项目中调用React Native模块
@IBAction func highScoreButtonTapped(sender : UIButton) {
NSLog("Hello")
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
NSAppTransportSecurity
NSExceptionDomains
localhost
NSTemporaryExceptionAllowsInsecureHTTPLoads
- 启动npm
npm start
- 运行
react-native run-ios
真机运行
在真机上运行ReactNative项目有两种方式，本文只说第二种
- 手机和电脑在同一个局域网，将上述代码的localhost改为机器ip。
- 打包出jsbundle
在iOS目录创建release_ios文件夹，执行如下命令
react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/
会将js打包成main.jsbundle，将图片等输出到asset目录。将这些内容拖入工程，修改加载React-Native代码
let jsCodeLocation = Bundle.main.url(forResource: "main", withExtension: "jsbundle")
这样就可以直接在真机上运行了。
热更新bundle的拆分与合并
这方面的详解我推荐necfol的方案，我就不多说废话了，人家的图那么清晰，还有Demo，我只能推荐了。
参考
含泪导入React-native 0.54到Swift原生项目