Question

ScrollToEnd()（在FlatList上）似乎在Android（或iOS模拟器）中没有效果。 refs似乎是正确的，并且正在调用我自己的scrollEnd函数（我很绝望），但屏幕上没有任何变化。所有滚动功能的效果似乎都非常不一致 - 我可以让scrollToOffset在iOS上工作但不能在Android上工作。我读到这可能是因为Android不知道平面列表中项目的高度，但它仍然无法与getItemLayout实现。

我没有反馈/错误可以解释为什么这不起作用。请注意，我正在使用Redux进行开发，使用Android 7.0进行测试，并在调试模式下尝试此操作（使用react-native run-android）。 FlatList位于普通View内（不是ScrollView）。

据我所知，代码中的逻辑是正确的，但在scrollToEnd上调用FlatList没有明显效果。我的render()功能：

<View style={styles.container}>
  <View style={styles.inner}>
    <FlatList
      ref={(ref) => { this.listRef = ref; }}
      data = {this.getConversation().messages || []}
      renderItem = {this.renderRow}
      keyExtractor = {(item) => item.hash + ''}
      numColumns={1}
      initialNumToRender={1000}
      onContentSizeChange={() => {
        this.scrollToEnd();
      }}
      getItemLayout={(data, index) => (
        {length: 50, offset: 50 * index, index}
      )}
      onContentSizeChange={this.scrollToEnd()}
      onLayout={ this.scrollToEnd()}
      onScroll={ this.scrollToEnd()}
   />
  </View>
</View>

this.scrollToEnd()：

scrollToEnd = () => {
    console.log("scrolling func"); // This is printed
    const wait = new Promise((resolve) => setTimeout(resolve, 0));
    wait.then( () => {
        console.log("scrolling"); // This is also printed
        this.listRef.scrollToEnd(); // Throws no errors, has no effect?
    });
};

非常感谢。

Answer 1

您的代码对我来说是正确的，但您使用的是哪个版本的React？从v16.3开始，推荐的使用refs的方法是通过React.createRef（），所以你的代码将改为：

// constructor
constructor(props) {
  super(props)
  this.flatlistRef = React.createRef();
}

// inside render
<FlatList
  ref={this.flatlistRef}
  ...
/>

// scrollToEnd
scrollToEnd = () => {
  this.flatlistRef.current.scrollToEnd(); // ref.current refers to component
};

请注意，这可能无法解决您的问题，因为旧的ref使用仍然有效

FlatList scrollToEnd无法在Android中使用Redux

1 个答案: