Question

我要创建一个浮动动作按钮，以将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()} />

Answer 2

对代码进行一些细化可能会有所帮助。

Class Parent extends React.Component {
    render() {
        return(
            <React.Fragment>
                <Flatlist />                 // Your flatlist
                <TouchableOpacity />         // Your FAB 
            </React.Fragment>
        );
    }
}

有时您的视图会与另一个视图重叠，因此您无法执行单击操作。还要根据您的设计和 FAB（浮动操作按钮）

Answer 3

此问题通过删除FlatList组件的ScrollView包装器解决。因此，FLatList和FAB组件都在同一父级中。

React Native FlatList的scrollToEnd（）不起作用

3 个答案: