代码之家 › 专栏 › 技术社区 › Justinus Hermawan

react native flatlist的scrolltoEnd()不起作用

react-native reactjs android javascript

Justinus Hermawan · 技术社区 · 6 年前

我想做一个浮动的动作按钮,以滚动我的平面列表到底部自动。我的扁平列表组件描述如下:

<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>

但是,每当我按下按钮时,它就不会不产生任何返回的错误。这里出什么事了?

3 回复 | 直到 6 年前

Ourabi 6 年前

对于那些还在寻找解决方案的人, scrollToEnd() 不起作用,因为在对 FlatList . 因为它继承自 ScrollView 最好的办法是打电话 滚动结束() 在里面 onContentSizeChange 像这样:

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

Kosalram Ramakrishnan 6 年前

在代码中稍加改进可能会有所帮助。

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

有时视图与另一个视图重叠,因此无法执行单击操作。同时根据您的设计和 Z指数 到 FAB(浮动动作按钮)

Justinus Hermawan 6 年前

通过移除flatlist组件的scrollview包装器解决了这个问题。所以,flatlist和fab组件都在同一个父级中。

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

7 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

7 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

7 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

8 月前

Luckkks · 过渡色工作不正常

8 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

8 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

8 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

8 月前

noblerare · Vite错误-未定义导出(SSR)

8 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

8 月前