React Native 篇之 自定义组件、引入组件、页面跳转
通常学习一门新的语言的时候，特别是前端开发，最怕的就是在一个页面堆积代码。
当开始学习RN（React Native的简称），各种demo练习，各种抄，各种啪啪啪，这个问题也就自然而然的暴露了出来，满满一大篇鸡肠子，自己看着都恶心！！！
感觉写那些博客或是书的人是故意的，无非就是想引出-——如何用组件的方式开发。类似于iOS里面类的封装。
各种翻书之后，小白终于找到解决办法。请看下文：
1.新建一个js文件：command+n 命名为 ——MoreController.js 保存到index.ios.js 同一根目录下
也就是,创建一个组件
MoreController.js 代码如下:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
View,
Text,
} = React;
var MoreViewController = React.createClass({
render() {
return(
You came here from the "right" button!
);
}
});
var styles = ({
scene: {
padding: 10,
paddingTop: 74,
flex:1,
},
});
// 最重要的一段代码：将这个视图控制器添加到组件模块中去
module.exports = MoreViewController;
2.下面是本文的第二个重点: 使用组件
index.ios.js 代码中：
// 表示引入其他相关模块
// 表示引入其他相关模块
var React = require('react-native');
var MoreViewController = require('./MoreViewController'); // 这个就是引入我们上面自定义的组件
var TouchViewController = require('./TouchViewController');
详细代码请看:
'use strict';
// 表示引入其他相关模块
var React = require('react-native');
var MoreViewController = require('./MoreViewController');
var TouchViewController = require('./TouchViewController');
// 语法糖... 呵呵 真的像个包着纸的糖！！！
// 使用 Rect.AppRegistry; Rect.Text;...
var {
AppRegistry,
StyleSheet, // 负责样式
Text,
View,
Image,
NavigatorIOS,
TouchableHighlight,
component,
} = React;
// 创建一个类： Rect.createClass()
// html
// 注意不能在标签内写注释
var NavDemo = React.createClass({
onRightButtonPress: function(){
this.refs.nav.push({
title: 'From Right',
component: MoreViewController, //使用MoreViewController
})
},
render() {
return (
style={styles.container}
initialRoute={{
component: HomeScene, //在NavigatorIOS中的第一个组件，此例子中就是HomeScene
title: 'NavigatorIOS Demo..', //导航栏的标题
rightButtonTitle: 'MORE!', //导航栏右键的按钮标题
onRightButtonPress: this.onRightButtonPress, //点击右边按钮触发的函数
}}>
);
},
});
var HomeScene = React.createClass({
onPress() {
this.props.navigator.push({
title:'From TouchableHightlight',
component: TouchViewController,
});
},
render() {
return(
Welcome to the NavigatorIOS Demo. Press here!
);
}
});
// View样式css
var styles = StyleSheet.create({
container: {
flex: 1,
},
scene: {
padding: 10,
paddingTop: 74,
flex:1,
},
});
// 注册应用入口
AppRegistry.registerComponent('NavDemo', () => NavDemo);
// 红色NavDemo是对外暴露的程序如何组件名称，你会在xcode appDelegate中看到注册的组件名就是这个，这个名字可以任意起，但是appDelegate里面一定要对应上。
// 绿色NavDemo是我们上文使用类方法创建的组件名称这个是不能改的，固定的。
3. AppDelegate中代码：
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"NavDemo" // 这个就是那个红色标注的NavDemo
initialProperties:nil
launchOptions:launchOptions];
Mark ——下篇博文讲React Native 项目运行的两种种方式 ：1.真机； 2.模拟器；以及本地打包调试加载方式和网络接口调试方式；