之前的文章中講解Node以及React的基本知識疾忍，本文就著重講一下如何向現(xiàn)有項(xiàng)目中集成React-Native企孩。
眾所周知袁稽，我們集成React-Native的目的是在本地編輯JS文件即可實(shí)現(xiàn)多端并用（比如iOS、Android等）补疑。而JS文件即是通過React-Native的某個方法加載的。我們不妨看一下最終在我們本地項(xiàng)目中加載JS文件的代碼：
NSString * strUrl = @"http://localhost:8081/index.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"Shop" initialProperties:nil launchOptions:nil];
rootView.frame = self.view.bounds;
rootView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view addSubview:rootView];
這是我們在某個ViewController的ViewDidLoad方法中加載JS文件所使用的方法诊胞，大概意思就是通過加載URL地址為：http://localhost:8081/index.bundle?platform=ios&dev=true的文件來實(shí)現(xiàn)加載指定的JS文件锹杈。當(dāng)然，這里的RCTRootView就是我們需要導(dǎo)入的React-Native庫文件中包含的類邪码。
既然我們依賴React-Native庫咬清，那就需要在PodFile中指定，這里我們指定如下：
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTText’,
'RCTImage',
'RCTNetwork',
'RCTWebSocket',
'DevSupport',
'CxxBridge',
]
pod "yoga", :path => './node_modules/react-native/ReactCommon/yoga'
我們可以看到影钉，這里有兩個庫React和yoga掘剪。并且這兩個庫的路徑都在本地的node_modules目錄下。
那node_modules是什么目錄呢肆汹，毫無疑問予权，npm的依賴庫目錄就是它。因此我們只需要在pod install前執(zhí)行npm install即可岗照。
講解了原理笆环，這里我們把步驟詳細(xì)描述一遍。
以我們的Shop項(xiàng)目為例
1.在Shop目錄下創(chuàng)建package.json文件
{
"name": "shop",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "^16.3.0-alpha.1",
"react-native": "0.54.2",
"uuid": "^3.2.1"
},
"devDependencies": {
"babel-jest": "23.0.0-alpha.0",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.2",
"react-test-renderer": "^16.3.0-alpha.1"
},
"jest": {
"preset": "react-native"
}
}
2.運(yùn)行命令npm install命令迫吐。這樣就創(chuàng)建了node_modules目錄账忘，并包含了React—Native等三方庫熙宇。
3.在Podfile中添加React-Native依賴溉浙，并執(zhí)行pod update命令
4.在項(xiàng)目的某個ViewController的ViewDidLoad中添加代碼，用于引入React—Native
NSString * strUrl = @"http://localhost:8081/index.bundle?platform=ios&dev=true";
NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"Shop" initialProperties:nil launchOptions:nil];
rootView.frame = self.view.bounds;
rootView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
[self.view addSubview:rootView];
- 在項(xiàng)目根目錄中創(chuàng)建文件index.js馆蠕，并輸入以下代碼：
import React, { Component } from 'react';
import {AppRegistry,Text,View,FlatList,StyleSheet, Image } from 'react-native';
class Shop extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.top}>
<Text style={styles.topText}>iOS提交資料</Text>
<Text>13312345678</Text>
</View>
<FlatList style={styles.list}
data={[
{key: '會員中心', icon:'./img/icon.png', title: '普通商家'},
{key: '企業(yè)資料', icon:'./img/icon.png', title: ''},
{key: '優(yōu)質(zhì)物流包月', icon: './img/icon.png', title: '已開通'},
{key: '修改登錄密碼', icon: './img/icon.png', title: ''},
]}
renderItem={({item}) =>
<View style={styles.item}>
<View style={styles.itemLeft}>
<Image source={require('./img/icon.png')} style={styles.leftIcon} />
<Text style={styles.itemText}>{item.key}</Text>
</View>
<View style={styles.itemRight}>
{item.title && <Text>{item.title}</Text>}
<Image source={require('./img/rightarrow.png')} style={styles.rightIcon} />
</View>
</View>
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
position: 'relative',
top: 50,
paddingLeft: 15,
paddingRight: 15,
},
top: {
position: 'relative',
top: 10,
left: 145,
},
topText: {
fontWeight: 'bold',
fontSize: 18,
marginBottom:6
},
list: {
position: 'relative',
top: 100,
left: 0,
},
item: {
position: 'relative',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
height:55,
},
leftIcon:{
width: 20,
height: 20,
},
itemText: {
textAlign: 'center',
left:10,
top:4,
fontSize: 14,
},
itemLeft: {
flexDirection: 'row',
},
itemRight: {
flexDirection: 'row',
},
rightIcon:{
width: 10,
height: 10,
marginLeft:8,
marginRight:8
},
})
// 項(xiàng)目名要有所對應(yīng)
AppRegistry.registerComponent('Shop', () => Shop);
6.在項(xiàng)目根目錄中執(zhí)行npm start命令。即可看到如下頁面：
