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