之前的文章中讲解Node以及React的基本知识，本文就着重讲一下如何向现有项目中集成React-Native。
众所周知，我们集成React-Native的目的是在本地编辑JS文件即可实现多端并用（比如iOS、Android等）。而JS文件即是通过React-Native的某个方法加载的。我们不妨看一下最终在我们本地项目中加载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的文件来实现加载指定的JS文件。当然，这里的RCTRootView就是我们需要导入的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前执行npm install即可。
讲解了原理，这里我们把步骤详细描述一遍。
以我们的Shop项目为例
1.在Shop目录下创建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.运行命令npm install命令。这样就创建了node_modules目录，并包含了React—Native等三方库。
3.在Podfile中添加React-Native依赖，并执行pod update命令
4.在项目的某个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];
- 在项目根目录中创建文件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: '企业资料', icon:'./img/icon.png', title: ''},
{key: '优质物流包月', 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
},
})
// 项目名要有所对应
AppRegistry.registerComponent('Shop', () => Shop);
6.在项目根目录中执行npm start命令。即可看到如下页面：
效果图
网友评论