本篇是在學習《React Native入門與實戰》這本書時做的筆記，代碼基于React Native 0.44實現的，算是對該書中代碼的小小更新。

Text組件是一個用來展示文本的組件。我們可以給它設置按下動作(onPress)，設置它的行數(numberOfLines)。
書中的新聞列表包括三部分，頭部、列表項和要聞。效果如下圖：

與上篇九宮格不同的是，我們將這三部分分別封裝起來，即：Header，List，ImportantNews，這樣，我們只需要在index.ios.js中引入這些組件即可，這樣即達到了封裝的效果，也可以重復使用這些自定義組件。

1.封裝頭部組件

頭部組件包括四個部分，三種文字樣式，另外還有一個紅色的底線。我們創建新的文件header.js（與index.ios.js在同一個目錄）。代碼很簡單：

//引入需要的組件
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    View,
    Text,
    PixelRatio
} from 'react-native'

//創建自定義組件header
export default class header extends Component {
    render() {
    return(
        <View style={style.flex}>
        <Text style={style.font}>
            <Text style={style.font1}>網易</Text>
            <Text style={style.font2}>新聞</Text>
            <Text>有態度</Text>
        </Text>
        </View>
    );
    }
}

//創建樣式表
style = StyleSheet.create({
    flex: {
    marginTop: 25,
    height: 50,
    borderBottomWidth: 3/ PixelRatio.get(),
    borderBottomColor: '#EF2D36',
    alignItems: 'center'
    },
    font: {
    fontSize: 25,
    fontWeight: 'bold',
    textAlign: 'center'
    },
    font1: {
    color: '#CD1D1C'
    },
    font2: {
    color: '#fff',
    backgroundColor: '#CD1D1c'
    }
});

這個樣式表中有三個font樣式，font中的可以被內部繼承，font1中添加顏色，其他的樣式從font中繼承，font2同理。flex中除了設置頭部高度外，還添加了底部分隔線。

創建好自定義組件后，就是使用了，首先打開index.ios.js，引入header組件：

import Header from './header';

使用自定義組件：

class neteast extends Component {
    render() {
    return(
        <Header></Header>
    );
    }
}

2.列表組件

這部分將自定義一個List組件，但實際上，它是列表的item。這樣，我們每增加一個item，直接復用List組件即可。這里，我們將List組件單獨放到list.js文件中。

//引入需要的組件
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

//創建自定義組件list
export default class list extends Component {
    render() {
    return (
        <View style={styles.list_item}>
        <Text style={styles.list_item_font}>{this.props.title}</Text>
        </View>
    );
    }
}

//創建樣式表
styles = StyleSheet.create({
    flex: {
    flex: 1
    },
    list_item: {
    height: 40,
    marginLeft: 10,
    marginRight: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#ddd',
    justifyContent: 'center'
    },
    lsit_item_font: {
    fontSize: 16
    }
});

使用起來也比較簡單：

<List title='宇航員在太空宣布“三體”獲獎'></List>
<List title='明天端午節啦'></List>
<List title='再次學習React Native'></List>

3.完成“要聞”

其實“要聞”部分也是一個列表，這個組件相對來說，增加以下兩個功能：1.超過兩行，以省略號結尾；2.點擊條目，彈出Dialog顯示。

通過onPress添加點擊事件，使用numberOfLines來設置最大行數，這里需要注意的是，在for循環使用了iterator，這就需要在循環內添加key屬性，否則，模擬器會有黃色警告。

相比header和list來說，importantNews組件使用了循環，并且添加了新的函數show()，當用戶點擊條目時，會彈出對話框顯示內容。

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

export default class importantNews extends Component {
    show(title) {
    alert(title);
    }
    render() {
    var news = [];
    for(var item of this.props.news) {
        var text = (
        <Text key={item} onPress={this.show.bind(this, item)}
        numberOfLines={2}
        style={styles3.news_item}>
        {item}
        </Text>
        );
        news.push(text);
    }
    return(
        <View style={styles3.flex1}>
        <Text style={styles3.news_title}>今日要聞</Text>
        {news}
        </View>
    );
    }
}

styles3 = StyleSheet.create({
    flex1: {
    flex: 1
    },
    news_title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#cd1d1c',
    marginLeft: 10,
    marginTop: 15
    },
    news_item: {
    marginLeft: 10,
    marginRight: 10,
    fontSize: 15,
    lineHeight: 30
    },
});

使用起來，也更“像”一個列表了：

<ImportantNews news={[
        '1、劉慈欣《三體》獲“雨果獎”為中國作家首次',
        '2、劉慈欣《三體》獲“雨果獎”為中國作家首次',
        '3、劉慈欣《三體》獲“雨果獎”為中國作家首次',
        '4、劉慈欣《三體》獲“雨果獎”為中國作家首次 劉慈欣《三體》獲“雨果獎”為中國作家首次 劉慈欣《三體》獲“雨果獎”為中國作家首次'
    ]}>
</ImportantNews>    

最后，別忘了將neteast注冊，使用哦?

AppRegistry.registerComponent('demo01', () => neteast);