0

问题

  • 出于某种原因，在我的旧 Android 手机（Android v 6.0.1）上进行测试时，我的 Expo SDK 36 应用程序的标题总是有额外的填充，看起来太笨重，即使手机没有一流的。
  • 在带有缺口的 iPhone 11 的 iOS 13.4 模拟器上进行测试，它可以正确处理缺口。

一些调试结果

  • 当我遍历 中的组件层次结构时react-native-debugger，我看到：
  • 我的<SafeAreaView />Screen 组件中的 fromreact-native-safe-area-view具有来自上下文的正确插入值，{ top: 0, bottom: 0, left: 0, right: 0 }
  • 但是，当我检查它以查看它时，<Header />来自react-navigation 4.3.7has的组件safeAreaInsets: { top: 'never' }props.scene.descriptor.optionsnavigationOptions
  • 而且，如果我进入<Header/>的孩子，当我进入 时<SafeView/>，它props.forceInset.top就是'always'。
  • 我react-navigation今天从 3.13.0 升级到 4.3.7，我想知道是否存在来自早期版本的依赖项（如react-native-safe-area-contextand ）的react-native-safe-area-view错误，或者它们的一般错误。
    • 在package-lock.json中，我注意到有一个@react-navigation/native带有at 版本dependency的软件包，而我注意到在semver range中。我想我在第一次查看 Expo 文档中的 SafeAreaView 说明时，通过与您的 Expo SDK 兼容的软件包的命令安装了它react-native-safe-area-view0.14.9package.jsonreact-native-safe-area-view^1.0.0expo install
  • 我的渲染方法如下所示：
  render() {
    return (
      <SafeAreaConsumer>
        {(insets) => {
        console.log("render -> insets", insets)

          return (
            <SafeAreaView
              style={{
                flex: 1,
                backgroundColor: Color.white,
                paddingBottom: insets.bottom,
                paddingLeft: insets.left,
                paddingRight: insets.right,
              }}
              forceInset={insets}
            >
              <View style={MainAppViewContainers.container}>
                ...
              </View>
            </SafeAreaView>
          )
        }}
      </SafeAreaConsumer>
    );
  }

想到的可能解释

  1. 可能<SafeAreaView/>无法自动检测并设置正确的插图？这里它说，“默认情况下，会自动检测设备的安全区域插图。”
  2. 如果在屏幕/导航器上设置正确的标题相关，使用forceInsetprop on是否<SafeAreaView/>无法更改forceInsetprop on <SafeView>，这是组件的子<Header/>组件自动生成？react-navigationnavigationOptions
  3. react-native-safe-area-view 0.14.9安装使用@react-navigation/native 3.7.11的版本react-navigation 4.3.7和react-native-safe-area-view 1.0.0Expo安装的版本之间是否存在某种依赖冲突？
4

0 回答 0