FlatList如何使用onRefresh进行页面刷新



  • FlatList在使用onRefresh时数据改变时页面上的数据不改变



  • _separator = () => {
    return <View style={{ height: 0.5, backgroundColor: 'darkgray' }} />;
    }
    _onRefresh = () => {
    loading = true;
    for (var i = 0; i < 10; i++) {
    data[i] = { JCXX: '酯化二部2017-03-29整改通知单', JCLX: '综合性检查', JCDW: '安环处', JCRY: '李四', TJSJ: '2017-03-28', ZT: '已反馈', num: '4/10' };
    }
    }
    _onEndReached = () => {
    for (var i = 0; i < 10; i++) {
    data.push({ JCXX: '化工二部2017-03-29整改通知单', JCLX: '综合性检查', JCDW: '安环处', JCRY: '李四', TJSJ: '2017-03-28', ZT: '已反馈', num: '4/10' });
    }
    }
    render() {
    const { navigate } = this.props.navigation;
    return (
    <FlatList
    ItemSeparatorComponent={this._separator}
    ListHeaderComponent={this._header}
    refreshing={loading}
    onRefresh={this._onRefresh}
    onEndReached={this._onEndReached}
    onEndReachedThreshold={1}
    data={data}
    renderItem={({ item }) =>
    <TouchableOpacity onPress={() => navigate('Chat', { item: item })}><View style={{ flexDirection: 'row', marginHorizontal: 15, marginVertical: 10 }}>
    <View><Text style={{ fontWeight: 'bold' }}>{item.JCXX}</Text>
    <Text>检查类型:{item.JCLX}</Text>
    <Text>检查单位:{item.JCDW}</Text>
    <Text>检查人员:{item.JCRY}</Text>
    <Text>提交时间:{item.TJSJ}</Text>
    <Text>状 态:{item.ZT}</Text>
    </View>
    <View>
    <Text style={{ backgroundColor: '#BB99FF', width: 130, textAlign: 'center', top: 65, color: '#ffffff' }}>已整改/全部:{item.num}</Text>
    </View>
    </View>
    </TouchableOpacity>}
    />
    );
    }

    }


  • administrators

    0_1494934457599_QQ20170516-193345@2x.png



  • 关于listview的刷新问题已经请教过晴明大神,感觉茅塞顿开。



  • @duxiaoke 说:我这样修改也不能实现页面的刷新

    _onRefresh = () => {
      loading = true;
      let datas=[]
      for (var i = 0; i < 10; i++) {
        datas[i] = { JCXX: '酯化二部2017-03-29整改通知单', JCLX: '综合性检查', JCDW: '安环处', JCRY: '李四', TJSJ: '2017-03-28', ZT: '已反馈', num: '4/10' };}
     data = datas
     }
    



  • @晴明 我是这样解决的

     _separator = () => {
        return <View style={{ height: 0.5, backgroundColor: 'darkgray' }} />;
      }
      _onRefresh = () => {
        loading = true;
        let a = [];
        for (var i = 0; i < 10; i++) {
          a[i] = { JCXX: '酯化二部2017-03-29整改通知单', JCLX: '综合性检查', JCDW: '安环处', JCRY: '李四', TJSJ: '2017-03-28', ZT: '已反馈', num: '4/10' };
        }
        this.setState({
          data: a
        })
        loading = false
      }
      _footer = () => {
        return <ActivityIndicator color="black" size="small" style={[styles.centering, { height: 80 }]} />
      }
      _onEndReached = () => {
        loading1 = true;
        let b = [];
        for (var i = 0; i < 10; i++) {
          b.push({ JCXX: '化工二部2017-03-29整改通知单', JCLX: '综合性检查', JCDW: '安环处', JCRY: '李四', TJSJ: '2017-03-28', ZT: '已反馈', num: '4/10' });
        }
        this.setState({
          data: this.state.data.concat(b)
        })
        loading1 = false;
      }
      render() {
        const { navigate } = this.props.navigation;
        return (
          <FlatList
            ItemSeparatorComponent={this._separator}
            ListHeaderComponent={this._header}
            ListFooterComponent={this._footer}
            refreshing={loading}
            onRefresh={this._onRefresh}
            onEndReached={this._onEndReached}
            onEndReachedThreshold={0.1}
            data={this.state.data}
            renderItem={({ item }) =>
              <TouchableOpacity onPress={() => navigate('Chat', { item: item })}><View style={{ flexDirection: 'row', marginHorizontal: 15, marginVertical: 10 }}>
                <View><Text style={{ fontWeight: 'bold' }}>{item.JCXX}</Text>
                  <Text>检查类型:{item.JCLX}</Text>
                  <Text>检查单位:{item.JCDW}</Text>
                  <Text>检查人员:{item.JCRY}</Text>
                  <Text>提交时间:{item.TJSJ}</Text>
                  <Text>状        态:{item.ZT}</Text>
                </View>
                <View>
                  <Text style={{ backgroundColor: '#BB99FF', width: 130, textAlign: 'center', top: 65, color: '#ffffff' }}>已整改/全部:{item.num}</Text>
                </View>
              </View>
              </TouchableOpacity>}
          />
        );
      }

  • administrators

    data = datas
    这根本不叫复制



  • @晴明 请问要如何做呢


登录后回复