Question

我是反应原生的新手，我遇到了一个我自己无法解决的问题。

到目前为止，这就是我使用它的方式：

export default class Form extends React.Component {
  state = {index: 0};

  _keyExtractor = (item, index) => item.id;

  myscrollToIndex = () => {
    this.setState({index: ++this.state.index});
    this.flatListRef.scrollToIndex({animated: true,index: this.state.index});
  };

  _renderItem = ({item}) => (
    <View>
      <Question {...item} />
      <Button label='Next' onPress={this.myscrollToIndex} style={styles.buttonNext}/>
    </View>
  )

  render() {
    return (
      <View style={styles.container}>
      <FlatList
        horizontal={false}
        ref={(ref) => { this.flatListRef = ref; }}
        scrollEnabled
        data={this.props.form}
        extraData={this.state}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem} />
      </View>
    );
  }
}

我想将索引传递给myscrolltoindex函数，但我没有设法，因为当我这样做时，这个.flatListRef被排除了。

有没有人遇到过类似的问题？

感谢您的时间

Answer 1

也使用index param。并传递索引。

例如_renderItem = ({item, index}) => ( <View> <Question {...item} /> <Button label='Next' onPress={this.myscrollToIndex(index) } style={styles.buttonNext}/> </View> )

Answer 2

尝试设置以下

keyExtractor={item => item.id}

然后更改滚动索引以使用id。我做了类似的事情，我是如何让它工作的。

如何正确使用ReactNative FlatList ScrolltoIndex？

2 个答案: