Загрузить элемент с задержкой в ​​FlatList в React Native? - PullRequest
Новая
       63

Загрузить элемент с задержкой в ​​FlatList в React Native?

0 голосов
/ 19 марта 2019

Я интегрировал FlatList, я хочу поставить задержку 1000 мл для загрузки каждого элемента. Сначала загрузите индекс 0, после 1000 мл загрузите индекс 1 ...

Возможно отложить в элементе FlatList.

Пожалуйста, помогите мне.

Спасибо.

1 Ответ

2 голосов
/ 19 марта 2019

Вот то, что я придумал,

Это не идеально, но оно должно делать вашу работу.

По сути, я вычислил ваш индекс и умножил его на 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,
  },

});
...