long time no see，最近在折腾RN。找了一些书，看了结果各种错误各种坑。于是我还是依然决然的到React Native官网和ReactNative中文网 去寻求答案，实在不行直接github issues得了。
一、pod install （RN） 导致第三方报错。
WTF啥情况，先查看了cocoapods，无意间发现了Ruby的taobao镜像停止更新，机智的我换成了rubychina源。
$ gem sources --add https://gems.ruby-china.org/ --remove https://rube.taobao.org/
这边假设都了解更新过后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
然后发现换成rubychina之后，pod install就好了。
RN安装成功
如果想折腾cocopods，降级以适应第三方库请点击这里。
二、明知书上的Demo会出错，还是毅然决然地入坑。
讲在前面：RN Version（0.37.0），React Version (15.3.1)
-
看一下工程目录：
文件目录图.png **
NPM**和Node Project Modules的区别和相关知识，这边不介绍有兴趣的可以去调研一下。
根据上面的目录结构，大家应该也注意到了两个文件index.ios.js和package.json两个文件
- 注意两文件的位置是在Xcode工程的根目录下。
这边我使用的文本编辑工具是Atom.- index.ios.js 前端代码在iOS中的实现写在其中。
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来一个简单的代码了。
'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);
三、说了这么久是时候Xcode表演真正的技术了。
是时候引入RCTRootView了,可以像这辆理解
- 1.ReactNative应用的生存空间。
- 2.RCTRootView对象加载RN（实际是index.ios.js 的js代码完成）的内容渲染出来。
这里偷了个懒用了书上的例子。
- 自定义一个JJReactView：UIView的视图
- 在awakeFromNib将通过将RN渲染的内容添加到视图中
//
// 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
终端显示结果.png
- S6:然后再模拟器上运行你的代码吧。
四、你以为我写demo就这么按部就班，然而是这样的。
错误3.png
- 可以尝试将package中的一些配置改改，整点事看看能报啥错。
其实买的这本书，在评论中久看到了书友说不好，写上去一大堆代码。为什么还要呢，对比之前的版本的写法，理解上应该会更好，可能我有些奇葩罢了。
- 其实代码简单，还是给个传送门吧点击这里
我是有底线的，继续爬坑吧。
