javascript - React Native FlatList的scrollToEnd()不起作用

Question

我想制作一个 float 操作按钮来自动将 FlatList 滚动到底部。我的FlatList组件描述如下:

<FlatList
  ref={(ref) => { this.flatListRef = ref; }}
  contentContainerStyle={this.state.barangFiltered.length === 0 && { paddingTop: 10, justifyContent: 'center', alignItems: 'center' }}
  showsVerticalScrollIndicator={false}
  data={this.state.barangFiltered}
  keyExtractor={(item, index) => `barang-${index}`}
  renderItem={({ item, index }) => <Barang
    item={item}
    index={index}
    navigation={this.props.navigation}
    duplicateBarang={(item) => this._duplicateBarang(item)}
    deleteBarang={(item) => this._deleteBarang(item)}
  />}
  ListEmptyComponent={<Text style={{ fontSize: 16, fontWeight: '400' }}>List is empty</Text>}
  getItemLayout={(data, index) => { return {length: 200, index, offset: 200 * index} }}
/>

还有按钮组件:

<TouchableOpacity
  activeOpacity={0.7}
  style={styles.fab}
  onPress={() => this.flatListRef.scrollToEnd()}
>
  <Ionicons name="ios-add" size={32} color="#0035C9" />
</TouchableOpacity>

但是，每当我按下按钮时，它什么都不做，不会返回任何错误。这里出了什么问题？

Answer 1

对于那些仍在寻找解决方案的人，scrollToEnd()不起作用，因为它是在对 FlatList 进行更改之前触发的。因为它继承自ScrollView最好的方法是调用 scrollToEnd()在onContentSizeChange像这样:

<FlatList
ref = "flatList"
onContentSizeChange={()=> this.refs.flatList.scrollToEnd()} />