在React Native的FlatList中延迟加载项目？

Question

我已经集成了FlatList，我想延迟1000毫升来加载每个项目。 第一次加载索引0，在1000毫升加载后索引1 ...

FlatList项目可能会延迟。

请帮我。

谢谢。

Answer 1

这是我想出的

它不是完美的，但是应该可以完成您的工作。

基本上，我计算了您的索引并将其乘以1000 ，然后将该数字乘以在Item组件中设置的超时时间

https://snack.expo.io/@azaabudeen/authentic-beef-jerky

    const data = [
  {name: 'name1'},
  {name: 'name2'},
  {name: 'name3'},
  {name: 'name4'},
  {name: 'name5'},
  {name: 'name6'},
  {name: 'name7'},
]
class Item extends React.Component {
  state = { loading: true }

  componentDidMount() {
    setTimeout(() => this.setState({ loading: false }), this.props.time);
  }

  render() {
    if(this.state.loading) {
      return null;
    }
    return(
      <View>
        <Text>{this.props.data.name}</Text>
      </View>
    );
  }
}
export default class App extends React.Component {
  renderItem=({ item, index}) => {
    return(
      <Item time={index * 1000} data={item}/>
    );
  }
  render() {
    return (
      <View style={styles.container}>
       <FlatList 
        data={data}
        initialNumToRender={0}
        renderItem={this.renderItem}
       />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },

});