前言
最近發(fā)現(xiàn)很多app都使用了ReactNative這門火熱的技術(shù)弥虐，不禁虎軀一震扩灯，因?yàn)楣镜墓ぷ飨鄬?duì)安逸媚赖，自己一直打算學(xué)習(xí)一下，但每次都不了了之珠插，這次又默默看了看招聘信息惧磺，RN已經(jīng)勢(shì)不可擋，新的一年想升職加薪看來要努力啦捻撑！
下面進(jìn)入我們的主題磨隘，在iOS原生項(xiàng)目中集成ReactNative，鼓搗了一天終于成功了顾患，鑒于市面上的資料都有些老舊了番捂，所以我將我的經(jīng)驗(yàn)分享給大家，趕緊上車描验，落后就要挨打白嘁。
tips：如果操作過程中碰到什么錯(cuò)誤或問題，請(qǐng)到文章最后問題合集中查看是否有解決辦法
一膘流、準(zhǔn)備工作
本文使用的版本
"react": "16.0.0",
"react-native": "0.51.0"
1絮缅、搭建開發(fā)環(huán)境
如果你已經(jīng)創(chuàng)建過RN項(xiàng)目，并且運(yùn)行成功了呼股，那么你的環(huán)境配置肯定是沒有問題的耕魄，但是如果你是第一次進(jìn)行學(xué)習(xí)，那么就要搭建開發(fā)環(huán)境了彭谁，具體的可以參考搭建ReactNative開發(fā)環(huán)境吸奴，搭建好后你可以按照他的提示創(chuàng)建一個(gè)RN項(xiàng)目運(yùn)行一下，看環(huán)境是否成功
2缠局、安裝CocoaPods
CocoaPods相信每一個(gè)iOS開發(fā)者都有接觸吧则奥，如果你沒有使用過也沒關(guān)系，參考CocoaPods的安裝使用和常見問題這篇文章學(xué)習(xí)下吧狭园。
本文只提供CocoaPods安裝React Native的方式读处，這個(gè)簡(jiǎn)單易用。
這里就不提供手動(dòng)集成的辦法了唱矛，因?yàn)楣P者也沒嘗試過罚舱，如果有需要可以自己查資料。
二绎谦、集成ReactNative
1管闷、文件配置
1）創(chuàng)建存放文件夾RNComponent和配置文件package.json
在項(xiàng)目中創(chuàng)建文件夾RNComponent并創(chuàng)建package.json配置文件，文件夾名字可以自定義窃肠，主要用來存放RN相關(guān)的文件包个，如下圖
//package.json 終端創(chuàng)建方法
$ cd 需要放置的目錄下（項(xiàng)目的根目錄/項(xiàng)目中自己創(chuàng)建的文件夾）
$ touch package.json
package.josn 中的內(nèi)容如下，其中name位App的名字冤留，dependencies為react和react-native的版本赃蛛，在創(chuàng)建這些信息時(shí)恃锉，建議利用react-native init AwesomeProject新建新項(xiàng)目時(shí)會(huì)自動(dòng)創(chuàng)建package.json，直接把文件復(fù)制過來呕臂，更改name為自己的原生項(xiàng)目名，確保信息為最新的肪跋，且不容易出錯(cuò)歧蒋。
{
"name": "RNExample",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0",
"react-native": "0.51.0"
},
"devDependencies": {
"babel-jest": "22.0.4",
"babel-preset-react-native": "4.0.0",
"jest": "22.0.4",
"react-test-renderer": "16.0.0"
},
"jest": {
"preset": "react-native"
}
}
2）安裝React Native依賴包
進(jìn)入到RNComponent文件夾下運(yùn)行命令行
npm install
執(zhí)行結(jié)束后項(xiàng)目中會(huì)多出一個(gè)node_modules文件夾。
看到有的文章說這里執(zhí)行起來很慢州既，但是我這里很快谜洽，圖中看見27.596s,可能是因?yàn)槲以谂渲铆h(huán)境的時(shí)候使用了淘寶鏡像，建議大家也這么做吴叶，搭建ReactNative開發(fā)環(huán)境里面有方法阐虚。
2、創(chuàng)建入口文件index.ios.js
終端創(chuàng)建方法
$ cd 需要放置的目錄下（項(xiàng)目的根目錄/項(xiàng)目中自己創(chuàng)建的文件夾）
$ touch index.ios.js
我這里開發(fā)使用的工具是WebStorm蚌卤，這里可以分享下我的下載地址实束。
index.ios.js 代碼如下
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class RNExample extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
// 注冊(cè)組件，程序入口
// 第一個(gè)參數(shù)：注冊(cè)模塊名稱,這里親測(cè)不和項(xiàng)目名一致也可以逊彭，但是好多資料說名字要和項(xiàng)目名一致
// 第二個(gè)參數(shù)：函數(shù)咸灿，此函數(shù)返回組件類名，程序啟動(dòng)就會(huì)自動(dòng)去加載這個(gè)組件
AppRegistry.registerComponent('App', () => RNExample);
3. Cocoapods集成React Native
如果還沒有使用CocoaPods
$ cd 項(xiàng)目的根目錄
$ touch Podfile
$ open -e Podfile
$ pod install //只是注釋侮叮，在內(nèi)容添加保存后執(zhí)行
Podfile中添加的內(nèi)容避矢，添加后保存，然后執(zhí)行 pod install
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, ‘9.0’
use_frameworks!
target ‘RNExample’ do
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同囊榜，那你就要根據(jù)實(shí)際路徑修改下面的`:path`
pod 'React', :path => ‘./RNComponent/node_modules/react-native', :subspecs => [
'Core',
'BatchedBridge', # 0.45 版本以后需要添加
'DevSupport', # 如果RN版本 >= 0.43审胸，則需要加入此行才能開啟開發(fā)者菜單
'RCTText',
'RCTImage',
'RCTNetwork',
'RCTWebSocket', # 這個(gè)模塊是用于調(diào)試功能的
# 在這里繼續(xù)添加你所需要的模塊
]
# 如果你的RN版本 >= 0.42.0，則加入下面這行
pod “yoga", :path => “./RNComponent/node_modules/react-native/ReactCommon/yoga"
end
注：上面添加的有注釋的幾個(gè)都是查找多處資料找到的卸勺，好多老的資料都不可行了
執(zhí)行結(jié)果：
三砂沛、項(xiàng)目處理
1、打開項(xiàng)目
使用CocoaPods后需要用箭頭所示文件打開
2孔庭、添加RCTRootView
這里只是在ViewController中進(jìn)行了測(cè)試尺上，具體放在什么地方，怎么放置大家根據(jù)項(xiàng)目需求而定
#import "ViewController.h"
#import <React/RCTRootView.h>
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 50)];
button.center = self.view.center;
[button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[button setTitle:@"Hello" forState:UIControlStateNormal];
[button addTarget:self action:@selector(buttonAction) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:button];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)buttonAction{
NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"App"
initialProperties:nil
launchOptions:nil];
self.view = rootView;
}
@end
3圆到、配置App Transport Security
在iOS 9以上的系統(tǒng)中怎抛，除非明確指明，否則應(yīng)用無法通過http協(xié)議連接到localhost主機(jī)芽淡。 建議在Info.plist進(jìn)行如下設(shè)置马绝，否則會(huì)報(bào)Could not connect to development server錯(cuò)誤
4、開啟服務(wù)器
在運(yùn)行我們的項(xiàng)目之前挣菲，我們需要先啟動(dòng)我們的開發(fā)服務(wù)器富稻。進(jìn)入 RNComponent目錄 ,然后命令行啟動(dòng)服務(wù)：
react-native start
5掷邦、運(yùn)行程序
我這里是用Xcode運(yùn)行的項(xiàng)目，指令沒有運(yùn)行起來椭赋，很尷尬抚岗。
項(xiàng)目跑起來，very good??哪怔，這里只是在模擬器上運(yùn)行宣蔚，真機(jī)上運(yùn)行請(qǐng)見問題合集2
之前一直報(bào)錯(cuò)無法連接服務(wù)器，現(xiàn)在我覺得問題就是沒有執(zhí)行第四部開啟服務(wù)器认境，如果有什么問題請(qǐng)留言交流胚委，下面有個(gè)問題集合，我以后遇到的問題都會(huì)收集起來叉信，希望對(duì)大家有所幫助亩冬，共同進(jìn)步。
6硼身、吃水不忘挖井人
參考鏈接：
http://www.reibang.com/p/3dc9d70a790f
https://reactnative.cn/docs/0.42/getting-started.html
http://www.reibang.com/p/47174bf215bf
四硅急、問題集合
問題都是我在開發(fā)中遇到的，情況不同解決方法可能不同僅供參考
1鸠姨、'fishhook/fishhook.h' file not found
解決辦法：將#import <fishhook/fishhook.h> 改為 #import "fishhook.h"即可
2铜秆、Could not connect to development server
如果正常的話http://localhost:8081/index.ios.bundle?platform=ios&dev=true將會(huì)有內(nèi)容
解決辦法：
- 1、是否配置App Transport Security
- 2讶迁、是否開啟服務(wù)器连茧，執(zhí)行react-native start
-
3、真機(jī)上運(yùn)行報(bào)錯(cuò)
如果模擬器上是可以的而在真機(jī)上運(yùn)行報(bào)上面的錯(cuò)誤請(qǐng)按下面步驟執(zhí)行巍糯，
打開設(shè)置-網(wǎng)絡(luò)-查看當(dāng)前ip地址啸驯，將項(xiàng)目中的localhost改為當(dāng)前ip（注意，手機(jī)的wifi應(yīng)當(dāng)和電腦的wifi是同一個(gè)才可以）
image.png
