是由于在React Native中,FlatList组件不能直接嵌套在ScrollView组件中导致的。这是因为FlatList本身就是一个可滚动的组件,如果将它嵌套在ScrollView中,会导致滚动冲突和性能问题。 解决这个错误的方法是将FlatList直接放在一个View组件中,而不是嵌套在ScrollView中。这样可以保证FlatList正常工作,并且可以滚动。
众所周知:FlatList 是基于 ScrollView 封装的,底层都是 VirtualizedList 组件。安卓端是有提示的:ScrollView和FlatList是禁止嵌套的。 先上布局,最终做出来的显示页面如下: 简单分析下布局:整个页面是可以下拉刷新的,日历是吸顶的一个横向可滚动的FlatList,下面内容区域:左侧是可滚动的列表,右侧也是可滚动的列表。右侧滚...
import React from 'react'; import { ScrollView, FlatList, View, Text } from 'react-native'; 在组件的render方法中,使用ScrollView作为外层容器,并在其中嵌套FlatList组件。例如: 代码语言:txt 复制 render() { return ( <ScrollView> <FlatList data={this.state.data} renderItem={({ item }) => ( ...
一般时间轴可以用Flatlist组件来实现,github上这个老哥开源的组件就相当好用:https://github.com/thegamenicorus/react-native-timeline-listview。不过他这个是基于ListView的,可以找下Flatlist的相关实现。 各个组件之间层级示意图: image.png 说回正题,准确跳转的这个难点在于,ScrollView和Flatlist是同一方向的滚动(由上...
ScrollView 嵌套 FlatList滚动,当flatList滚动时,ScrollView禁止滚动 this.state={enableScrollViewScroll:true,...}onEnableScroll=value=>{this.setState({enableScrollViewScroll:value,});};render(){return(<ScrollView scrollEnabled={this.state.enableScrollViewScroll}><FlatList ...
我以允许滚动内部 FlatLists 的方式修改了您的完整工作示例。import { Component, default as React } from "react"; import { View, FlatList, ScrollView, Text } from "react-native"; export default class LabScreen extends Component<{}> { constructor(props) { ...
使用React.Fragment:在ScrollView内部使用React.Fragment可以避免额外的 DOM 节点,从而提高性能。 避免嵌套滚动:尽量避免在ScrollView内部嵌套另一个ScrollView,因为这会导致性能下降。如果需要嵌套滚动,可以考虑使用FlatList或SectionList。 使用shouldComponentUpdate或React.memo:在这些方法中实现逻辑来判断是否需要重新渲染组件,...
问题的具体描述 FlatList绝对定位后,覆盖在scrollView上面,无法触发滚动 FlatList没有与scrollView嵌套。 我了解到FlatList绝对不能放在scrollView里面,所以我将其抽出来,同时将FlatList绝对定位后与TextInput组合来生成下拉搜索框 当FlatList绝对定位后,覆盖到scrollV
我用的是react-native-scrollable-tab-view,加了这个组件的话,就没办法实现上述所说整个页面滚动了。仅仅ScrollView、FlatList嵌套的话,是可以做到的整个页面滚动的。 P.P.S. rn-collapsing-tab-bar这个组件可以解决上述问题(思路也是用Aniamted) 2019.3.8更新: rn-collapsing-tab-bar 这个组件虽然解决了滚动问题,...
React Native FlatList跳转到顶部/底部 核心代码如下: <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.container}//下拉刷新 ,有 ScrollView 需要加载ScrollView,无则加到 FlatListrefreshControl={<RefreshControl refreshing={this.state.isRefreshing} ...