這里介紹下,如何再原生項(xiàng)目里嵌入ReactNative控件
操作之前,你的電腦上要裝有以下:
xcode
cocoapods
ReactNative相關(guān)組件,及其環(huán)境配置
1.首先是創(chuàng)建一個(gè)OC項(xiàng)目,如果你已有項(xiàng)目可跳過這個(gè)步驟,直接再文件根目錄下操作
2.由于本人是做iOS 開發(fā)的,因此只在iOS項(xiàng)目的基礎(chǔ)上進(jìn)行配置,再文件根目錄下,創(chuàng)建一個(gè)文件夾,用于存放js文件和相關(guān)配置文件,為了方便理解,我對(duì)文件結(jié)構(gòu)進(jìn)行調(diào)整
3.接下來,打開終端
cd 根目錄
touch package.json
open package.json
react-native對(duì)react的版本有嚴(yán)格要求委刘，高于或低于某個(gè)范圍都不可以dependencies中的react和react-native的版本取決于你的具體需求你可以使用npm info react和npm info react-native來查看當(dāng)前的最新版本
{
"name": “ReactNativeDemo”,
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.4.1",
"react-native": "0.39.2"
}
}
npm install
4.使用cocoapods添加ReactNative組件
pod init
# target的名字一般與你的項(xiàng)目名字相同
target 'ReactNativeDemo' do
# 'node_modules'目錄一般位于根目錄中
# 但是如果你的結(jié)構(gòu)不同沐旨，那你就要根據(jù)實(shí)際路徑修改下面`:path`
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTNetwork',
'RCTWebSocket',
# 這個(gè)模塊是用于調(diào)試功能的 # 在這里繼續(xù)添加你所需要的模塊 ]
end
pod install
5.創(chuàng)建js文件
cd 根目錄
touch index.ios.js
在js文件中,編寫你的控件(這是中文網(wǎng)上摘取的,你們可以編寫自己的js)
'use strict';
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class RNHighScores extends React.Component {
render() {
var contents = this.props["scores"].map(
score => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text>
);
return (
<View style={styles.container}>
<Text style={styles.highScoresTitle}>
2048 High Scores!
</Text>
<Text style={styles.scores}>
{contents}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
highScoresTitle: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
scores: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
// 整體js模塊的名稱
AppRegistry.registerComponent('ReactNativeDemo', () => RNHighScores); // 這句要注意兩個(gè)名字,第一個(gè)名字是項(xiàng)目的名字,第二個(gè)名字是上面控件的名字
6.接下來就是打開項(xiàng)目,編寫OC部分
在項(xiàng)目中導(dǎo)入:
可能會(huì)報(bào)錯(cuò),說文件找不到
那么需要做如下操作:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for customization after application launch. NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL : jsCodeLocation moduleName : @"ReactNativeDemo" initialProperties : @{ @"scores" : @[ @{ @"name" : @"Alex", @"value": @"42" }, @{ @"name" : @"Joel", @"value": @"10" } ] } launchOptions : launchOptions]; UIViewController *vc = [[UIViewController alloc] init]; rootView.frame = [UIScreen mainScreen].bounds; [vc.view addSubview:rootView]; self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; self.window.rootViewController = vc; [self.window makeKeyAndVisible]; return YES;}
6.到這一步還沒有結(jié)束,你需要開啟服務(wù)器
cd 根目錄
// 開啟本地服務(wù)器
npm start
然后就可以運(yùn)行項(xiàng)目:或者如果你可以的話,終端輸入下面的命令,如果你是按著上面的步驟搭建的項(xiàng)目,下面的命令是走不通的,具體原因,自己去百度
react-native run-iso
下面的黃色文字,意思是說,如果你把項(xiàng)目調(diào)成release模式,會(huì)加載的更快,也就是關(guān)閉debug模式
網(wǎng)絡(luò)請(qǐng)求:
<key>NSAppTransportSecurity</key><dict><key>NSAllowsArbitraryLoads</key><true/></dict>
也許你會(huì)發(fā)現(xiàn),在加載rn的時(shí)候,頂部會(huì)出現(xiàn)load from...類似的加載進(jìn)度條,這個(gè)不必?fù)?dān)心,relase(上線模式下)提示不顯示的
