配置开发环境
参照官网 搭建RN环境
集成进现有iOS项目
1.设置项目结构
首先创建一个空文件夹作为项目根目录，
然后在其中创建iOS文件夹，把原工程夹里面的内容拷贝到iOS文件夹
2.安装JavaScript依赖包
在项目根目录下创建名为package.json的空文件，然后填入以下内容：
{
"name": "MyReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0",
"react-native": "0.51.0-rc.3"
}
}
打开终端，进入到项目的根目录中（即包含有package.json文件的目录），在终端键入如下命令来安装React和React Native模块：
$ npm install
3.配置CocoaPods
安装CocoaPods教程请自行百度
使用终端进入iOS目录执行以下命令，创建Podfile文件：
$ pod init
按照如下内容编辑Podfile：
source 'https://github.com/CocoaPods/Specs.git'
# Swift应用必须的添加以下两行
platform :ios, '8.0'
use_frameworks!
# target的名字一般与你的项目名字相同
target 'YourProjectName' do
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.45则加入此行
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的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
接下来执行：
$ pod install
等待安装结束
注：如果你看到类似"The swift-2048 [Debug] target overrides the FRAMEWORK_SEARCH_PATHS build setting defined in Pods/Target Support Files/Pods-swift-2048/Pods-swift-2048.debug.xcconfig. This can lead to problems with the CocoaPods installation"的警告，请查看Xcode的Build Settings中的Framework Search Paths选项，确保其中的Debug和Release都只包含$(inherited)。
安装成功后，通过工程里面的workspace打开工程，编译，此时可能会报错，提示找不到fishkook.h文件，此时只需将报错部分，也就是 #import <fishhook/fishhook> 改为 #import <React/fishhook> ，再次编译即可编译成功
4.简单Demo
在项目的根目录创建名为index.js文件，键入如下代码：
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class RNHighScores extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.highScoresTitle}>
Hello World!
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
});
AppRegistry.registerComponent('MyReactNativeApp', () => RNHighScores);
接下来，在iOS工程中新建一个ViewController作为根控制器（这里命名为CustomRootVC），取消从storyboard中加载视图，在info.plist中添加白名单，以便允许程序访问http链接：
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
接着，在Appdelegate中键入如下代码：
import UIKit
import React
@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
var window: UIWindow?
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
// Override point for customization after application launch.
window = UIWindow(frame: UIScreen.main.bounds)
let jsCodeLocation = URL(string: "http://localhost:8081/index.bundle?platform=ios")
let rootView = RCTRootView(
bundleURL: jsCodeLocation,
moduleName: "MyReactNativeApp",
initialProperties: nil,
launchOptions: nil
)
let rootVC = CustomRootVC()
rootVC.view = rootView
window?.rootViewController = rootVC
window?.makeKeyAndVisible()
return true
}
}
到此为止，一个简单的ReactNativeDemo就写好了，但是想要运行起来还需要做一件事，就是开启本地server。打开终端，进入到node_modules文件夹所在目录，也就是项目的根目录，执行如下命令：
$ npm start
出现如下图所示，则说明服务启动成功：
接下来，回到xcode，运行项目
运行时界面
运行成功界面
声明：以上内容部分摘自ReactNative中文网，转载请注明出处！
网友评论