第一步 環(huán)境配置
注意：
- xcode可以正常編寫(xiě)程序并運(yùn)行;
- 會(huì)使用終端硬猫。
- 讀者需要根據(jù)上下文理解本文運(yùn)行的終端命令所在的目錄
- iOS工程根目錄：.xcodeproj文件所在的目錄呛哟；根目錄：將要整合成的整個(gè)工程的目錄（本文的根目錄是指ios/目錄的父目錄）
- 此文中的demo來(lái)子官方網(wǎng)站
1.安裝cocoapods
打開(kāi)終端，執(zhí)行以下命令
sudo gem install cocoapods
此步需要安裝一些其他程序滴某，比如我的需要安裝2.2.2版本以上的ruby brew install ruby 。讀者可以根據(jù)實(shí)際情況安裝所需程序。
2.添加package.json文件
cd 到iOS工程根目錄食店，執(zhí)行以下命令，然后編輯package.json赏寇，最后保存
vim package.json
一般package.json文件包含以下內(nèi)容
{
"name": "NumberTileGame",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.0.2",
"react-native": "0.26.1"
}
}
此處的"name": "NumberTileGame",NumberTileGame替換成自己的iOS工程名
創(chuàng)建完package.json文件后吉嫩，建議將原生的iOS工程文件放到新建的ios/目錄下
3.安裝node_modules/
cd到根目錄，執(zhí)行以下命令
npm install
此步會(huì)根據(jù)上面的package.json文件安裝node_modules
第二步 React Native Framework
Subspecs介紹
使用rn開(kāi)發(fā)App并不是所有的rn框架都必須使用嗅定，而Subspecs為我們提供了選擇自娩，通過(guò)Subspecs列表我們可以進(jìn)行框架選擇。說(shuō)白了露戒，就是Subspecs就是菜單椒功，吃哪些菜點(diǎn)哪些菜捶箱。
例如想要用到AppRegistry, StyleSheet, View和其他的rn核心包，需要導(dǎo)入Core subspec;Text組件需要導(dǎo)入RCTText subspec; Image組件需要導(dǎo)入RCTImage subspec动漾。這些配置需要在下面的Podfile中設(shè)置
node_modules/react-native/React.podspec丁屎。此文件中聲明了react-native框架的各種包。
創(chuàng)建Podfile文件
cd到iOS工程的根目錄（ios/）
pod init
命令執(zhí)行完后會(huì)在（ios/）目錄下創(chuàng)建Podfile文件旱眯，所需要的react-native依賴(lài)庫(kù)在這里配置晨川，初始內(nèi)容如下：
# Uncomment this line to define a global platform for your project
# platform :ios, '9.0'
target 'NumberTileGame' do
# Uncomment this line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!
# Pods for NumberTileGame
target 'NumberTileGameTests' do
inherit! :search_paths
# Pods for testing
end
target 'NumberTileGameUITests' do
inherit! :search_paths
# Pods for testing
end
end
Pod安裝
對(duì)Podfile進(jìn)行修改，根據(jù)需要的組件進(jìn)行配置删豺。如下：
# The target name is most likely the name of your project.
target 'NumberTileGame' do
# Your 'node_modules' directory is probably in the root of your project,
# but if not, adjust the `:path` accordingly
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTWebSocket', # needed for debugging
# Add any other subspecs you want to use in your project
]
end
ios/目錄下共虑，執(zhí)行以下命令
pod install
這一步會(huì)等待很長(zhǎng)時(shí)間,要有耐心。（主要是網(wǎng)絡(luò)問(wèn)題呀页，可以從網(wǎng)上搜索解決辦法）
創(chuàng)建index.ios.js （rn的入口函數(shù)）
cd到根目錄妈拌，執(zhí)行以下命令
touch index.ios.js
編寫(xiě)index.ios.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,
},
});
// Module name
AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
此處最后一行代碼中的RNHighScores是自定義的rn組件的名字，iOS原聲代碼調(diào)用時(shí)需要用到
第三步 編寫(xiě)iOS代碼調(diào)用rn
此步可能還有其它方法蓬蝶，請(qǐng)自行查詢(xún)資料
使用xcode打開(kāi)源代碼時(shí)一定要打開(kāi).xcworkspace文件尘分，若果直接打開(kāi).xcodeproj會(huì)出現(xiàn)鏈接錯(cuò)誤
打開(kāi)工程后，左側(cè)導(dǎo)航欄如下圖所示
iOS源碼
ViewController.m
#import "ViewController.h"
#import "RCTRootView.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
- (IBAction)highScoreButtonPressed:(id)sender {
NSLog(@"High Score Button Pressed");
NSURL *jsCodeLocation = [NSURL
URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @"RNHighScores"
initialProperties :
@{
@"scores" : @[
@{
@"name" : @"Alex",
@"value": @"42"
},
@{
@"name" : @"Joel",
@"value": @"10"
}
]
}
launchOptions : nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
}
@end
連線
- 在mainboard中創(chuàng)建兩個(gè)UIButton丸氛，如下圖所示
- 將
High ScoresUIButton與- (IBAction)highScoreButtonPressed:(id)sender方法連線培愁，連線時(shí)選擇Touch Up Inside，如下圖所示
測(cè)試
Apple默認(rèn)會(huì)阻止程序訪問(wèn)http缓窜，需要修改info.plis配置定续，如下圖所示
此時(shí)如果運(yùn)行，可能會(huì)報(bào)以下錯(cuò)誤
解決此問(wèn)題需要導(dǎo)入 libc++.tbd 依賴(lài)包禾锤，如下圖所示
最后私股，command + r 運(yùn)行程序
至此，rn整合iOS項(xiàng)目的環(huán)境配置已經(jīng)基本完成时肿，可以愉快的敲代碼了庇茫！可是事與愿違，在我修改代碼的時(shí)候發(fā)現(xiàn)xcode并不支持rn依賴(lài)庫(kù)的代碼補(bǔ)全螃成，后來(lái)從網(wǎng)上找到了解決方法
