Question

这个问题可能有点不正统或违背一些最佳做法，但我想在我的反应原生列表视图中转换单元格回收。

我会解释我的问题......

我在反应原生中过滤了100行。如果我在5个初始行渲染后没有滚动（所有行都有网络图像），我的滤镜方法就可以了。那些5的性能很好。但是，如果我滚动并查看30行并更改我的数据源状态，listview将重新使用单元格及其可怕的性能城市几秒钟。（又名事情变得不稳定，我的模态关闭动画并不流畅）

所以我想简而言之，我想在数据源更改或禁用回收部分时完全重置listview组件。这可能吗？

CODE

列表视图

        <ListView
           dataSource={this.state.dataSource}
           removeClippedSubviews={true}
           ref={'listview'}
           initialListSize={5}
           onEndReachedThreshold={1}
           scrollRenderAheadDistance={1}
           pageSize={1}
           enableEmptySections={true}
           renderRow={this._renderItem.bind(this)}
         />

renderItem

        return (
      <View style={{backgroundColor:"#ffffff",marginTop:1,overflow:'hidden'}}>
        <TouchableOpacity onPress={() => Actions.DirectoryDetail({title:item.title,item})}>
          <View style={{backgroundColor:'white',flexDirection:'row',paddingLeft:5,}}>
            <View style={{alignItems:'flex-start',flex:3,}}>
              <Text style={{fontFamily:'oswald-bold',fontSize:screenWidth/15,color:"#000000"}}>{item.title}</Text>
                <View style={{flexDirection:'row'}}>
                  <Text style={{paddingBottom:2,fontFamily:'oswald-regular',color:'#c0392b',paddingRight:10,fontSize:screenWidth/23}}>
                    {item.category}
                  </Text>
                  <StarRating
                    disabled={true}
                    maxStars={5}
                    rating={item.rate}
                    starColor={'#FFD700'}
                    emptyStarColor={'#bdc3c7'}
                    starSize={20}
                    selectedStar={(rating) => this.onStarRatingPress(rating)}
                  />
                </View>
              <Text>{newDescriptionString}</Text>
            </View>
            <View style={{alignItems:'flex-end',flex:2,paddingRight:5}}>
              <Image
                onLoad={() => this.setState({loading:false})}
                style={{width: screenWidth / 3,height: screenWidth / 3}}
                source={{uri: item.profile}}
                resizeMode={'contain'}>
              </Image>
            </View>
          </View>
        </TouchableOpacity>
      </View>
    );

更改this.state.datasource

的过滤器函数

     //itemsString is my object that I stringify
     var itemsString = JSON.parse(this.state.itemsString);
     var all = itemsString.filter(function(d){
       return d.active === true
     })

  let newArray =  new ListView.DataSource({
          rowHasChanged: (row1, row2) => row1 !== row2,
        }).cloneWithRows(all)

    this.setState({
      dataSource: newArray
    });

React Native Listview禁用回收

0 个答案: