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

Question

我已经集成了FlatList，我想延迟1000毫升来加载每个项目。首先加载索引 0，1000 ml 后加载索引 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,
  },

});