React Native 學習從0至1-第二篇-FlatList

1. 折騰了兩三個小時纔出來一個界面，先上坑

2. 代碼如下

export default class App extends Component {

    render() {
        var data = [];
        for (var i = 0; i < 5; i++) {
            data.push({key: i, title: i + ''});
        }
        return (
                <View style={{flex:1}}>
                    <FlatList
                        //頭部視圖
                        ListHeaderComponent={this._header}
                        //尾部
                        ListFooterComponent={this._footer}
                        //每一行都有分割線
                        ItemSeparatorComponent={this._separator}
                        //寫法二：renderItem={(item)=>{return <Text >123</Text>}}
                        renderItem= {this.renderItem}
                        //這個key 必填
                        keyExtractor= {(item, index) => index + item}
                        data={data}
                    >
                    </FlatList>
                </View>
        )
    }
    renderItem = (item) => {
        var txt = '第' + item.index + '個' + ' title=' + item.item.title;
        var bgColor = item.index % 2 == 0 ? 'red' : 'blue';
        //沒有return的話不顯示。中文官網沒有return
        return <Text style={[{flex:1,height:100,backgroundColor:bgColor},styles.txt]}>{txt}</Text>
    }

    _header = () => {
        return <Text style={[styles.txt,{backgroundColor:'green'}]}> 這是頭部 </Text>;
    }

    _footer = () => {

        return <Text style={[styles.txt,{backgroundColor:'black'}]} >這是尾部</Text>;
    }

    _separator = () => {
        return <View style={{height:4,backgroundColor:'yellow'}}/>;
    }
}

const styles = StyleSheet.create({
    txt: {
        textAlign: 'center',
        textAlignVertical: 'center',
        color: 'white',
        fontSize: 30,
    }
});