long time no see，最近在折騰RN。找了一些書，看了結(jié)果各種錯(cuò)誤各種坑。于是我還是依然決然的到React Native官網(wǎng)和ReactNative中文網(wǎng) 去尋求答案，實(shí)在不行直接github issues得了。
一、pod install （RN） 導(dǎo)致第三方報(bào)錯(cuò)。
WTF啥情況，先查看了cocoapods，無意間發(fā)現(xiàn)了Ruby的taobao鏡像停止更新，機(jī)智的我換成了rubychina源。
$ gem sources --add https://gems.ruby-china.org/ --remove https://rube.taobao.org/
這邊假設(shè)都了解更新過后podfile的寫法。
platform :ios, '7.0'
target 'cocoapodsMangeRN' do
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# Add any other subspecs you want to use in your project
]
end
然后發(fā)現(xiàn)換成rubychina之后，pod install就好了。
RN安裝成功
如果想折騰cocopods，降級(jí)以適應(yīng)第三方庫請(qǐng)點(diǎn)擊這里。
二、明知書上的Demo會(huì)出錯(cuò)，還是毅然決然地入坑。
講在前面：RN Version（0.37.0），React Version (15.3.1)
-
看一下工程目錄：
文件目錄圖.png **
NPM**和Node Project Modules的區(qū)別和相關(guān)知識(shí)，這邊不介紹有興趣的可以去調(diào)研一下。
根據(jù)上面的目錄結(jié)構(gòu)，大家應(yīng)該也注意到了兩個(gè)文件index.ios.js和package.json兩個(gè)文件
- 注意兩文件的位置是在Xcode工程的根目錄下。
這邊我使用的文本編輯工具是Atom.- index.ios.js 前端代碼在iOS中的實(shí)現(xiàn)寫在其中。
Normally with React Native projects, you will put files like package.json, index.ios.js, etc. in the root directory of your project and then have your iOS specific native code in a subdirectory like ios/where your Xcode project is located (e.g., .xcodeproj
).
- package.json:一些必要的依賴包記錄在其中，啥樣呢？
{
"name": "jjreact-native",
"version": "1.0.0",
"description": "ToDosthTest",
"main": "index.js",
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"author": "jeversonjee",
"license": "ISC",
"dependencies": {
"react": "15.3.1",
"react-native": "^0.37.0"
}
}
- S1:寫好package.json就用npm來安裝React和React Native模塊
npm install - S2:就是上述的cocoapods的 pod install 了。
- S3:在index.ios.js來一個(gè)簡(jiǎn)單的代碼了。
'use strict';
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class cocoapodsMangeRN extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>
This is jeversonjee test
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF',
},
});
AppRegistry.registerComponent('cocoapodsMangeRN', () => cocoapodsMangeRN);
三、說了這么久是時(shí)候Xcode表演真正的技術(shù)了。
是時(shí)候引入RCTRootView了,可以像這輛理解
- 1.ReactNative應(yīng)用的生存空間。
- 2.RCTRootView對(duì)象加載RN（實(shí)際是index.ios.js 的js代碼完成）的內(nèi)容渲染出來。
這里偷了個(gè)懶用了書上的例子。
- 自定義一個(gè)JJReactView：UIView的視圖
- 在awakeFromNib將通過將RN渲染的內(nèi)容添加到視圖中
//
// JJReactView.m
// cocoapodsMangeRN
//
// Created by JeversonJee on 2016/11/18.
// Copyright ? 2016年 JerversonJee. All rights reserved.
//
#import "JJReactView.h"
#import <RCTRootView.h>
@implementation JJReactView
- (void)awakeFromNib {
//
NSString *urlStr = @"http://localhost:8081/index.ios.bundle?platform=ios";
NSURL *jsCodeLocation = [NSURL URLWithString:urlStr];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"cocoapodsMangeRN" initialProperties:nil launchOptions:nil];
[self addSubview:rootView];
rootView.frame = self.bounds;
[super awakeFromNib];
}
@end
- S5:打開終端
cd：工程根目錄&npm start
終端顯示結(jié)果.png
- S6:然后再模擬器上運(yùn)行你的代碼吧。
四、你以為我寫demo就這么按部就班，然而是這樣的。
錯(cuò)誤3.png
- 可以嘗試將package中的一些配置改改，整點(diǎn)事看看能報(bào)啥錯(cuò)。
其實(shí)買的這本書，在評(píng)論中久看到了書友說不好，寫上去一大堆代碼。為什么還要呢，對(duì)比之前的版本的寫法，理解上應(yīng)該會(huì)更好，可能我有些奇葩罷了。
- 其實(shí)代碼簡(jiǎn)單，還是給個(gè)傳送門吧點(diǎn)擊這里
我是有底線的，繼續(xù)爬坑吧。
