配置開(kāi)發(fā)環(huán)境
參照官網(wǎng) 搭建RN環(huán)境
集成進(jìn)現(xiàn)有iOS項(xiàng)目
1.設(shè)置項(xiàng)目結(jié)構(gòu)
首先創(chuàng)建一個(gè)空文件夾作為項(xiàng)目根目錄听想，
然后在其中創(chuàng)建iOS文件夾腥刹，把原工程夾里面的內(nèi)容拷貝到iOS文件夾
2.安裝JavaScript依賴包
在項(xiàng)目根目錄下創(chuàng)建名為package.json的空文件，然后填入以下內(nèi)容：
{
"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"
}
}
打開(kāi)終端汉买，進(jìn)入到項(xiàng)目的根目錄中（即包含有package.json文件的目錄）衔峰，在終端鍵入如下命令來(lái)安裝React和React Native模塊：
$ npm install
3.配置CocoaPods
安裝CocoaPods教程請(qǐng)自行百度
使用終端進(jìn)入iOS目錄執(zhí)行以下命令，創(chuàng)建Podfile文件：
$ pod init
按照如下內(nèi)容編輯Podfile：
source 'https://github.com/CocoaPods/Specs.git'
# Swift應(yīng)用必須的添加以下兩行
platform :ios, '8.0'
use_frameworks!
# target的名字一般與你的項(xiàng)目名字相同
target 'YourProjectName' do
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同蛙粘，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.45則加入此行
'DevSupport', # 如果RN版本 >= 0.43垫卤，則需要加入此行才能開(kāi)啟開(kāi)發(fā)者菜單
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 這個(gè)模塊是用于調(diào)試功能的
# 在這里繼續(xù)添加你所需要的RN模塊
]
# 如果你的RN版本 >= 0.42.0，請(qǐng)加入下面這行
pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
# 如果RN版本 >= 0.45則加入下面三個(gè)第三方編譯依賴
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
接下來(lái)執(zhí)行：
$ pod install
等待安裝結(jié)束
注：如果你看到類似"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"的警告出牧，請(qǐng)查看Xcode的Build Settings中的Framework Search Paths選項(xiàng)穴肘，確保其中的Debug和Release都只包含$(inherited)。
安裝成功后舔痕，通過(guò)工程里面的workspace打開(kāi)工程评抚，編譯豹缀，此時(shí)可能會(huì)報(bào)錯(cuò)，提示找不到fishkook.h文件慨代，此時(shí)只需將報(bào)錯(cuò)部分邢笙，也就是 #import <fishhook/fishhook> 改為 #import <React/fishhook> 她肯，再次編譯即可編譯成功
4.簡(jiǎn)單Demo
在項(xiàng)目的根目錄創(chuàng)建名為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);
接下來(lái)，在iOS工程中新建一個(gè)ViewController作為根控制器（這里命名為CustomRootVC）赦役，取消從storyboard中加載視圖丈积，在info.plist中添加白名單筐骇，以便允許程序訪問(wèn)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
}
}
到此為止江滨，一個(gè)簡(jiǎn)單的ReactNativeDemo就寫好了铛纬，但是想要運(yùn)行起來(lái)還需要做一件事，就是開(kāi)啟本地server唬滑。打開(kāi)終端告唆，進(jìn)入到node_modules文件夾所在目錄，也就是項(xiàng)目的根目錄晶密，執(zhí)行如下命令：
$ npm start
出現(xiàn)如下圖所示擒悬，則說(shuō)明服務(wù)啟動(dòng)成功：
接下來(lái)，回到xcode稻艰，運(yùn)行項(xiàng)目
聲明：以上內(nèi)容部分摘自ReactNative中文網(wǎng)懂牧，轉(zhuǎn)載請(qǐng)注明出處！
