FlatList scrollToEnd 在带有 Redux 的 Android 中不起作用答案

【问题标题】：FlatList scrollToEnd not working in Android with ReduxFlatList scrollToEnd 在带有 Redux 的 Android 中不起作用
【发布时间】：2018-06-13 16:12:52
【问题描述】：

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

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

据我所知，代码中的逻辑是正确的，但是在FlatList 上调用scrollToEnd 没有明显的效果。我的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?
    });
};

非常感谢。

【问题讨论】：

标签： android react-native react-native-flatlist

【解决方案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 的旧用法应该仍然有效

【讨论】：