React Native实现列表刷新

React Native中的ListView

React Native 提供了几个适用于展示长列表数据的组件，一般而言我们会选用FlatList或是SectionList。

FlatList

FlatList组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。 FlatList更适于长列表数据，且元素个数可以增删。和ScrollView不同的是，FlatList并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。

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


type Props = {};

class Home extends Component<Props> {

    render() {
        return (
            <View style={styles.container}>
                <FlatList data={[{key: 'Devin'},
                    {key: 'Jackson'},
                    {key: 'James'},
                    {key: 'Joel'},
                    {key: 'John'},
                    {key: 'Jillian'},
                    {key: 'Jimmy'},
                    {key: 'Julie'}]}
                          renderItem={({item}) => <Text style={styles.welcome}>{item.key}</Text>}></FlatList>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

// 输出组件类
module.exports = Home;

SectionList

如果要渲染的是一组需要分组的数据，也许还带有分组标签的，那么SectionList将是个不错的选择，就有点像Android中的ExpandListView：

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


type Props = {};
class Shop extends Component<Props> {

    render() {
        return (
            <View style={styles.container}>
                <SectionList
                    sections={[
                        {title: 'D', data: ['Devin']},
                        {title: 'J', data: ['Jackson', 'James', 'Jillian', 'Jimmy', 'Joel', 'John', 'Julie']},
                    ]}
                    renderItem={({item})=> <Text style={styles.item}>{item}</Text>}
                    renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
                    keyExtractor={(item, index) => index}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
});

// 输出组件类
module.exports = Shop;

服务器数据绑定到FlatList

React Native 提供了和 web 标准一致的Fetch API，用于满足开发者访问网络的需求。下面我们用Fetch 来请求网络，然后用ListView显示：

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


type Props = {};
class Mine extends Component<Props> {

    constructor(props){
        super(props);

        this.state = {
            data: null,
        };
    }

    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={this.renderItemView}
                />
            </View>
        );
    }

    //返回itemView，item参数内部会传入进去
    renderItemView({item}) {
        return (
            <View>
                <Text  style={styles.content}>标题: {item.title}</Text>
            </View>
        );
    }

    // 为啥把fetch写在componentDidMount()中呢，因为这是一个RN中组件的生命周期回调函数，会在组件渲染后回调
    componentDidMount(){
        fetch('http://183.131.205.41/Bbs')
            .then((response)=> response.json()) // 将response转成json传到下一个then中
            .then((jsonData2)=> {
                this.setState({
                    data:jsonData2.data, // 返回json的data数组
                });
                alert("code:" + jsonData2.code);// 弹出返回json中的code
            })
            .catch((error) => {          //注意尾部添加异常回调
            alert(error);
        });
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    }
});

// 输出组件类
module.exports = Mine;

下拉刷新与加载更多

FlatList性质也是一样的只不过使用起来更加封闭、内部封装好了添加头尾布局、下拉刷新、上拉加载等功能… 实现的效果：

import React, {Component} from 'react';
import {
    ActivityIndicator,
    FlatList,
    RefreshControl,
    StyleSheet,
    Text,
    TouchableNativeFeedback, TouchableOpacity,
    View
} from 'react-native';

let totalPage = 5;//总的页数
let itemNo = 0;//item的个数
type Props = {};
const REQUEST_URL = 'http://183.131.205.41/Bbs?page=';

class More extends Component<Props> {

    constructor(props) {
        super(props)
        this.state = {
            page: 1,
            isLoading: true,
            //网络请求状态
            error: false,
            errorInfo: '',
            dataArray: [],
            showFoot: 0, // 控制foot， 0：隐藏footer  1：已加载完成,没有更多数据   2 ：显示加载中
            isRefreshing: false,//下拉控制
        }
    }

    //网络请求——获取数据
    fetchData() {
        //这个是js的访问网络的方法
        console.log(REQUEST_URL + this.state.page)
        fetch(REQUEST_URL + this.state.page, {
            method: 'GET',
        })
            .then((response) => response.json())
            .then((responseData) => {
                let data = responseData.data;//获取json 数据并存在data数组中
                let dataBlob = [];//这是创建该数组，目的放存在key值的数据，就不会报黄灯了
                let i = itemNo;
                //将data循环遍历赋值给dataBlob
                data.map(function (item) {
                    dataBlob.push({
                        key: i,
                        title: item.title,
                        createtime: item.createtime
                    })
                    i++;
                });
                itemNo = i;
                let foot = 0;
                if (this.state.page >= totalPage) {
                    foot = 1;//listView底部显示没有更多数据了
                }
                this.setState({
                    //复制数据源
                    dataArray: this.state.dataArray.concat(dataBlob),
                    isLoading: false,
                    showFoot: foot,
                    isRefreshing: false,
                });

                data = null;//重置为空
                dataBlob = null;
            })
            .catch((error) => {
                alert(error);
                this.setState({
                    error: true,
                    errorInfo: error
                })
            })
            .done();
    }

    componentDidMount() {
        this.fetchData();
    }

    // (true 的话进行下2步操作componentWillUpdate和componentDidUpdate
    shouldComponentUpdate() {
        return true
    }

    handleRefresh = () => {
        this.setState({
            page: 1,
            isRefreshing: true,//tag,下拉刷新中，加载完全，就设置成flase
            dataArray: []
        });
        this.fetchData()
    }

    //加载等待页
    renderLoadingView() {
        return (
            <View style={styles.container}>
                <ActivityIndicator
                    animating={true}
                    color='blue'
                    size="large"
                />
            </View>
        );
    }

    // 给list设置的key，遍历item。这样就不会报黄线
    _keyExtractor = (item, index) => index.toString();

    //加载失败view
    renderErrorView() {
        return (
            <View style={styles.container}>
                <Text>
                    {this.state.errorInfo}
                </Text>
            </View>
        );
    }

    //返回itemView
    _renderItemView({item}) {
        //onPress={gotoDetails()}
        const gotoDetails = () => Actions.news({'url': item.url})//跳转并传值
        return (
            // <TouchableNativeFeedback onPress={() => {Actions.news({'url':item.url})}} >////切记不能带（）不能写成gotoDetails()
            <TouchableNativeFeedback onPress={gotoDetails}>
                <View>
                    <Text style={styles.title}>标题：{item.title}</Text>
                    <Text  style={styles.content}>时间: {item.createtime}</Text>
                </View>
            </TouchableNativeFeedback>
        );
    }

    renderData() {
        return (
            <FlatList
                data={this.state.dataArray}
                renderItem={this._renderItemView}
                ListFooterComponent={this._renderFooter.bind(this)}
                onEndReached={this._onEndReached.bind(this)}
                onEndReachedThreshold={1}
                ItemSeparatorComponent={this._separator}
                keyExtractor={this._keyExtractor}
                //为刷新设置颜色
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.isRefreshing}
                        onRefresh={this.handleRefresh.bind(this)}//因为涉及到this.state
                        colors={['#ff0000', '#00ff00', '#0000ff', '#3ad564']}
                        progressBackgroundColor="#ffffff"
                    />
                }
            />

        );
    }

    render() {
        //第一次加载等待的view
        if (this.state.isLoading && !this.state.error) {
            return this.renderLoadingView();
        } else if (this.state.error) {
            //请求失败view
            return this.renderErrorView();
        }
        //加载数据
        return this.renderData();
    }

    _separator() {
        return <View style={{height: 1, backgroundColor: '#999999'}}/>;
    }

    _renderFooter() {
        if (this.state.showFoot === 1) {
            return (
                <View style={{height: 30, alignItems: 'center', justifyContent: 'flex-start',}}>
                    <Text style={{color: '#999999', fontSize: 14, marginTop: 5, marginBottom: 5,}}>
                        没有更多数据了
                    </Text>
                </View>
            );
        } else if (this.state.showFoot === 2) {
            return (
                <View style={styles.footer}>
                    <ActivityIndicator/>
                    <Text>正在加载更多数据...</Text>
                </View>
            );
        } else if (this.state.showFoot === 0) {
            return (
                <View style={styles.footer}>
                    <Text></Text>
                </View>
            );
        }
    }

    _onEndReached() {
        //如果是正在加载中或没有更多数据了，则返回
        if (this.state.showFoot != 0) {
            return;
        }
        //如果当前页大于或等于总页数，那就是到最后一页了，返回
        if ((this.state.page != 1) && (this.state.page >= totalPage)) {
            return;
        } else {
            this.state.page++;
        }
        //底部显示正在加载更多数据
        this.setState({showFoot: 2});
        //获取数据，在componentDidMount()已经请求过数据了
        if (this.state.page > 1) {
            this.fetchData();
        }
    }

}

const styles = StyleSheet.create({
    container: {
        padding: 10,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    title: {
        marginTop: 8,
        marginLeft: 8,
        marginRight: 8,
        fontSize: 15,
        color: '#ffa700',
    },
    footer: {
        flexDirection: 'row',
        height: 24,
        justifyContent: 'center',
        alignItems: 'center',
        marginBottom: 10,
    },
    content: {
        marginBottom: 8,
        marginLeft: 8,
        marginRight: 8,
        fontSize: 14,
        color: 'black',
    }

});

// 输出组件类
module.exports = More;

图片.png