现来个图：没图说个xx
先来分析怎么做
- 一个导航栏
- 一个列表
- 一个摘要列表
大体可以分为上中下三个模块，那么我们从上到下一次封装。
我们来搞出些事情
创建.js文件，一个组件一个.js文件
我们通过命令行工具，进入工程所在的文件夹，使用touch命令创建三个组件对应的文件
命令如图：
localhost:iOSFile WangXuesen$ touch list.js
localhost:iOSFile WangXuesen$ touch importNews.js
localhost:iOSFile WangXuesen$ touch header.js
在Sublime Text 中打开三个文件，我们先来封装头部的导航栏
导航栏封装
代码：
var React = require('react-native')
var {
AppRegistry,StyleSheet,View,Text,} = React;
var Header = React.createClass({
render:function() {
return(
<View style = {styles.flex}>
<Text style = {styles.font}>
<Text style={styles.font_1}>凤凰</Text>
<Text style={styles.font_2}>资讯</Text>
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
flex: {
marginTop: 25,height: 50,borderBottomWidth: 3/React.PixelRatio.get(),borderBottomColor: '#ef2d36',alignItems: 'center',},font: {
fontSize: 25,fontWeight: 'bold',textAlign: 'center',/*文字在组件中居中*/
},font_1: {
color: '#cd1d1c',font_2: {
color: '#fff',backgroundColor:'#cd1d1c',}
});
module.exports = Header;
代码分析：
－var Header = React.createClass此处注意，定义Header时，开头一定要大写，
-module.exports = Header;这句的意思是说，这个组件本身不是入口文件，而是一个从别的文件中调用的组件，对外的名字，是Header
上代码：
'use strict';
var React = require('react-native');
var Header = require('./iOSFile/header.js');
var {
AppRegistry,PixelRatio,} = React;
var stylesForFH = StyleSheet.create({
flex: {
flex: 1,}
});
var wxsPrj = React.createClass({
render: function() {
return (
<View style = {stylesForFH.flex}> <Header></Header> </View> ); } }) AppRegistry.registerComponent('wxsPrj',() => wxsPrj);
代码详解：
var Header = require('./iOSFile/header.js');这里就像iOS中引入头文件一样，将header组件引入
列表组件封装
代码：
var React = require('react-native')
var {
AppRegistry,} = React;
var List = React.createClass({
render: function(){
return(
<View style = {styles.list_item}>
<Text style = {styles.list_item_font}>
{this.props.title}
</Text>
</View>
);
}
});
var styles = StyleSheet.create({
flex: {
flex: 1,list_item: {
height: 40,marginLeft: 10,marginRight: 10,borderBottomWidth: 1,borderBottomColor: '#ddd',justifyContent: 'center',list_item_font: {
fontSize: 16,});
module.exports = List;
组件调用：
###引入组件：
var List = require('./iOSFile/list.js');
###组件调用：
var wxsPrj = React.createClass({
render: function() {
return (
<View style = {stylesForFH.flex}>
<Header></Header>
<List title = '马上过年回家了，你又票吗？'></List>
<List title = '北京近期寒流离散，进入暖春的节奏也来越近！'></List>
<List title = '春运将至，铁道部各部门已做好应急准备！'></List>
<List title = '今年，你妈逼你结婚了吗？'></List>
</View>
);
}
})
效果：
要闻摘要组件
代码：
var React = require('react-native')
var {
AppRegistry,} = React;
var ImportNews = React.createClass({
show: function(title){
alert(title);
},render: function(){
var news = [];
for(var i in this.props.news){
var text = (
<Text
key = {i}
onPress = {this.show.bind(this,this.props.news[i])}
numberOfLines = {2}
style = {styles.news_item}>
{this.props.news[i]}
</Text>
);
news.push(text);
}
return(
<View style = {styles.flex}>
<Text style = {styles.new_title}>
要闻摘要
</Text>
<View style = {styles.centerLine}></View>
{news}
</View>
);
}
});
var styles = StyleSheet.create({
flex : {
flex: 1,list_item : {
height: 40,new_title: {
fontSize: 20,marginTop: 15,color: '#cd1d1c',news_item: {
marginLeft: 10,fontSize: 15,lineHeight: 20,centerLine: {
backgroundColor : '#cd1d1c',height:1,}
})
module.exports = ImportNews;
组件调用：
var wxsPrj = React.createClass({
render: function() {
return (
<View style = {stylesForFH.flex}>
<Header></Header>
<List title = '马上过年回家了，你又票吗？'></List>
<List title = '北京近期寒流离散，进入暖春的节奏也来越近！'></List>
<List title = '春运将至，铁道部各部门已做好应急准备！'></List>
<List title = '今年，你妈逼你结婚了吗？'></List>
<ImportNews news = {[
'1,过年回家，多陪陪父母','2,同学聚会，少喝酒，多吃肉，毕竟你那么瘦','3,台湾的独立分子，你们的死期到了，大圣来了！！！','4,我赵日天不服！！还有谁，我要打十个～',]}></ImportNews>
</View>
);
}
})
onLayout : 该属性的值是一个函数，用于获取该元素布局的位置和大小，例如：｛“target”： 4，“layout”：｛“y”：10，“width”： 300，“x”：10，“height”：117｝｝。一般事件函数的形式是function(e){console.log(e.nativeEvent)};,这样就可以打印事件的参数。
key : 在for循环中每个标签中加入key 并且每个key都是唯一的（unique），这个是和react的dom-diff算法相关的，
在react对dom做循环的时候，会根据data-reactid生成虚拟dom树。如果你没有手动的添加unique constant key的话，react是无法记录你的dom操作的。它只会在重新渲染的时候，继续使用它自己添加的data-reactid来比对dom树。
如果没有这个key会报警告：
Warning: Each child in an array or iterator should have a unique “key” prop. Check the top-level render call using
