RN集成到現(xiàn)有項目中
preivew
本片文章主要適用于iOS開發(fā)者究飞。
安裝環(huán)境
1置谦、node.js
brew install node
brew install watchman
2、npm換源
中國站明確提醒亿傅，切勿用cnpm
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
3媒峡、可選擇的安裝yarn
npm install -g yarn react-native-cli
4、yarn換源
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
5袱蜡、yarn和npm簡單區(qū)別
yarn add xxx,npm install xxx
6梢卸、安裝xcode以及comman line tools移迫，作為iOS開發(fā)的同學(xué)這個如果不會快毛，建議放棄程序員職業(yè)
7凿滤、在集成到現(xiàn)有iOS項目之前译秦，先跑通一遍由RN腳手架創(chuàng)建的獨立工程迈窟。
#用react-native工具創(chuàng)建helloword項目
react-native init AwesomeProject --version 0.55.4
#進(jìn)入工程目錄
cd AwesomeProject
#安裝npm依賴茂洒，這個過程可能會很漫長威根，有一些庫很大缅茉，建議科學(xué)上網(wǎng)嘴脾。
npm install
#起服務(wù)，這個命令會喚起iOS模擬器
react-native run-ios
#作為iOS開發(fā)者蔬墩，你也可以這樣
npm start
#然后打開iOS工程译打，用xcode編譯運行
官網(wǎng)也給出了鏈接解決
8拇颅、不出意外奏司，應(yīng)該會正常展示一個helloword頁面，當(dāng)然也會有意外樟插，遇到意外可以留言韵洋，會給與解答竿刁。
集成現(xiàn)有iOS項目
1、在項目根目錄創(chuàng)建文件名為：package.json的文件,start是啟動服務(wù)命令搪缨，即npm start食拜，bundle-ios是打包命令，即npm bundle-ios會在./ios/bundle目錄下面生產(chǎn)js副编，這個js會在后面的didFinishLaunchingWithOptions中使用负甸，前提是你得有這個./ios/bundle目錄。
2痹届、內(nèi)容如下
{
"name": "MyReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"bundle-ios": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.jsbundle --assets-dest ./ios/bundle",
}
}
3呻待、命令行cd到package.json所在的文件夾，安裝npm依賴
yarn add react-native@0.55.4
#親測短纵，其他很多版本有問題带污，會導(dǎo)致iOS工程編譯不通過，或者編譯通過運行crash
4香到、這時候可能會提示鱼冀，缺少依賴包，咱們一個一個安裝
warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".
會有類似的warnings提示悠就，不可忽略千绪，依葫蘆畫瓢，如果是如上提示梗脾，那么
yarn add react@16.2.0
知道warnings消失
5荸型、安裝cocoaPods，如果你沒有炸茧，作為iOS開發(fā)的同學(xué)瑞妇，建議放棄程序員職業(yè)
6、怎么安裝梭冠、初始化pod不累贅
target 'NumberTileGame' do
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同辕狰，那你就要根據(jù)實際路徑修改下面的`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.47則加入此行
'DevSupport', # 如果RN版本 >= 0.43，則需要加入此行才能開啟開發(fā)者菜單
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 調(diào)試功能需要此模塊
'RCTAnimation', # FlatList和原生動畫功能需要此模塊
# 在這里繼續(xù)添加你所需要的其他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里面蔓倍，可以看到很多pod都是依賴于本地路徑的，要確保這些路徑能真實訪問到
7盐捷、pod install
這個過程漫長偶翅，很漫長，請科學(xué)上網(wǎng)碉渡，發(fā)現(xiàn)失敗不要放棄聚谁，繼續(xù)重試
8、到這里從開發(fā)環(huán)境角度已經(jīng)搭建完成了爆价，咱們就寫一個RN頁面垦巴，名字叫index.js媳搪，同樣放到根目錄下去
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet, Text
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
// type Props = {};
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
hello : 'Hello Suning'
};
}
render() {
let title = this.state.hello;
return (
<Text style={styles.text}>{title}</Text>
);
}
}
const styles = StyleSheet.create({
text: {
width: 100,
height: 100,
fontWeight: 'bold',
backgroundColor: '#8ab9c2',
flex: 1,
color: 'red'
}
});
9、iOS集成RN骤宣，配置初始化代碼
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
//第一種方式：系統(tǒng)API
// NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
//第二種方式秦爆，制定url
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://127.0.0.1:8081/index.bundle?platform=ios"];
// 第三種方式 npm run bundle-ios
// NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index" withExtension:@"jsbundle"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"SMINIP"
initialProperties:nil
launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
驗證url是否可用
瀏覽器打開此鏈接，如果看到的是一大坨js憔披，那就對了等限。再次過程中，請確保npm start了芬膝。
10望门、三種方式說明，
第一種锰霜，系統(tǒng)的api筹误，應(yīng)該RN會自動找服務(wù)中的index頁面
第二種，指定url
第三種癣缅，指定js文件厨剪，
大家可能會疑惑，為什么要npm start起一個服務(wù)友存？是因為我們【8】中寫的那個index.js是不能直接運行的祷膳，需要
鏈接很多js庫，打包一起才能運行屡立。所以這個服務(wù)就是起到這個作用直晨，你把從服務(wù)中獲取url，換成第三種方式-使用js文件作為RN加載就不難理解了膨俐。
