react-native的ListView控件的使用

react-native的ListView控件的使用

1.数据准备

    // 在构造方法中准备
    constructor(props) {
        super(props);

        this.state = {
            // 创建一个DataSource
            dataSource: new ListView.DataSource({
                rowHasChanged: ((row1, row2) => row1 !== row2)
            }),
            // 是否加载完毕
            load: false
        }
    }

2.创建ListView

    render() {
        return (
            <View>
                <ListView
                    dataSource={this.state.dataSource}
                    {/*这里是每个item的布局，这里在方法中实现*/}
                    renderRow={this.getItemView}
                />
            </View>
        );
    }    
    getItemView(item) {
        return (
            <View>
                <Text style={styles.itemHeader}>{item.desc}</Text>
                <View style={styles.item}>
                    <Text style={styles.itemMeta}>{item.who}</Text>
                    <Text style={styles.itemMeta}>{item.createdAt}</Text>
                </View>
            </View>
        );
    }

3.在componentDidMount生命周期中执行数据请求

    // 发起数据请求
    componentDidMount() {
        this.getMoviesFromApiAsync();
    }
    // 使用自带的网络请求请求数据
    getMoviesFromApiAsync() {
        fetch('http://gank.io/api/data/Android/10/1')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    //改变加载ListView
                    load: true,
                    //设置数据源刷新界面
                    dataSource: this.state.dataSource.cloneWithRows(responseJson.results),
                })
            })
            .catch((error) => {
                console.error(error);
            });
    }