美文网首页
FlatList组件刷新失败 19-12-30

FlatList组件刷新失败 19-12-30

作者: 喜悦莲花 | 来源:发表于2019-12-30 14:52 被阅读0次
  • 问题描述:
    仅 iOS 平台,有较大几率下拉刷新时不会触发绑定的 onRefresh 方法

  • 问题分析:
    查看 Flatlist 组件文档,发现 RefreshControl 组件中有一句

    当ScrollView处于竖直方向的起点位置(scrollY: 0),此时下拉会触发一个onRefresh事件。

    于是, 去除导航栏发现 refresh 事件正常.
    查看导航栏组件发现 SafeAreaView 组件, 该组件用于适配刘海屏.
    于是,去除SafeAreaView组件发现问题消失

  • 处理代码:

    • 区分 iOS 平台, 区分 iPhoneX 以上机型

    import { Platform, Dimensions } from "react-native";
    const X_WIDTH = 375;
    const X_HEIGHT = 812;
    const { height: D_HEIGHT, width: D_WIDTH } = Dimensions.get("window");
    const isIphone = Platform.OS === 'ios';
    const isIphoneX = Platform.OS === 'ios' &&((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) || (D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT))

    • 根据布局调整样式

    const navHeight = isIphoneX ? 30 : 20;

相关文章

网友评论

      本文标题:FlatList组件刷新失败 19-12-30

      本文链接:https://www.haomeiwen.com/subject/ruhmoctx.html