React Native－6.React Native Text组件，多组件封装实战之凤凰资讯页面

现来个图：没图说个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,
  StyleSheet,
  Text,
  View,
  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,
    StyleSheet,
    View,
    Text,
} = 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,
    StyleSheet,
    View,
    Text,

} = 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,
        marginLeft: 10,
        marginRight: 10,
        borderBottomWidth: 1,
        borderBottomColor: '#ddd',
        justifyContent: 'center',

    },

    list_item_font: {
        fontSize: 16,
    },

    new_title: {
        fontSize: 20,
        fontWeight: 'bold',
        marginLeft: 10,
        marginTop: 15,
        color: '#cd1d1c',
    },

    news_item: {
        marginLeft: 10,
        marginRight: 10,
        fontSize: 15,
        lineHeight: 20,
    },

    centerLine: {
        backgroundColor : '#cd1d1c',
        height:1,
        marginLeft: 10,
        marginRight: 10,
    }
})

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>
        );
    }
})

代码详解：
现在解释几个属性：

• onPress : 该属性的值是一个函数，支持按下事件（即手机触摸事件）。当手指按下的时候执行该函数。

• 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

alert 效果：