问题标签 [react-native-safe-area-view]

当我运行expo start我收到的警告是：

我知道这是一个警告，在生产模式下看不到，但为了不错过其他可能的警告，我想摆脱它。

我没有使用componentWillReceiveProps，但依赖expo项正在使用。

• 建议npx react-codemod rename-unsafe-lifecycles只检查我编写的代码，而不是来自node_modules.
• 并且该建议Please update the following components: SafeView, Transitioner不适用，因为它们不是来自我包含的组件，而是来自expo主要组件本身的组件及其依赖react-native项。

作为解决方案，是否有任何方法可以以通用方式消除此警告？否则，是否有一种方法可以摆脱仅SafeView和Transitioner组件（即 react-native-safe-area-view react-navigation react-navigation-stack 包）？

问题

• 出于某种原因，在我的旧 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
• 我的渲染方法如下所示：

想到的可能解释

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安装的版本之间是否存在某种依赖冲突？

我正在尝试使用@react-navigation 设置应用程序。

我已经安装了所有必需的依赖项：

启动应用程序时，我收到有关“measureInWindow”的错误。

wrapNativeSuper.js:10 Unhandled JS Exception: TypeError: Cannot read property 'measureInWindow' of undefined

这似乎与react-native-safe-area-context某些研究有关，但我无法弄清楚为什么这不起作用。自从添加库并重建应用程序以来，我已经安装了 pod，但同样的错误仍然存​​在。如果我删除react-native-safe-area-context，那么 react-navigation 会抱怨它没有被添加。

这个问题是相关的，但答案建议更新 react-navigation 并且我使用的是最新版本：TypeError: Cannot read property 'measureInWindow' of undefined - 这个问题也提到了react-native-safe-area-view，但我相信 react-navigation 不再使用它来支持 -safe -区域上下文。

react-navigation 上的这个问题似乎相关（https://github.com/react-navigation/react-navigation/issues/7933）但它表明 react-native-safe-area-view 正在使用中并且有一个新的版本（未发布？）

一个名为的组件SafeAreaView由react-native、react-navigation、react-native-safe-area-context和react-native-safe-area-view导出。

有什么区别，在哪些情况下我应该使用哪一个？

所以在我的工作场所，我们在 expo 上有一个遗留的 react-native 应用程序。我使用 android 模拟器进行调试，它用于 android 设备上的内部工作人员。我们有几个月没有碰它，当我们试图重建时，我们得到了一个错误。我不得不升级所有库，因为它们中的大多数已被弃用。

代码如下：

现在，我有以下错误：

不变违规：requireNativeComponent：在 UIManager 中找不到“RNCSafeAreaView”。

我花了一整天的时间来修复它，但到目前为止找不到解决方案。

我没有 android 或 ios 文件夹。我不使用豆荚。

我的 package.json 是：

完整的错误是：

使用 android studio 构建时，出现以下错误：

我在用着

有关如何使其工作的任何建议？包好像下线了。

我目前正在使用 material-bottom-tabs 在我的移动应用程序中实现导航。

出于某种奇怪的原因，它没有正确显示，而是在我的屏幕底部被切断。

无论我是否激活手势控制（因此 Android 内置导航栏消失），都会发生这种情况。

如果我在 Tabs.Navigator 的样式中添加填充，那么 Tab-Navigation-Bar 仍然被切断，现在被白色填充。

我试图将我的 Tab.Navigator 包装在 SafeAreaView 中（来自 react-native-safe-area-context），但如果我这样做，我只会得到一个纯白色的屏幕。

这是我的代码：

显示问题的屏幕截图

我遇到的问题是在使用react-navigation嵌套在选项卡导航器中的堆栈导航器以获得基本的聊天 UI 外观时，键盘隐藏了底部的聊天消息输入字段。所以我试着把KeyboardAvoidingView键盘抬到一个可见的位置，但键盘没有显示出来。我尝试了一个涉及添加headerHeight到keyboardVerticalOffset道具的解决方案，但它似乎关闭了大约 50 像素。例如，如果我添加headerHeight + 50的keyboardVerticalOffset所有内容看起来都很棒，但如果我将设备切换到 iPhone 5 或其他设备，屏幕更小，SafeArea 插入不同等，键盘将再次处于错误位置。

我不确定罪魁祸首究竟是什么，但我现在认为这是顶部和/或底部的 SafeArea 填充，我了解到这是“插图”。我正在尝试使用useSafeAreaInsets，但所有值都返回 0！我想使用这些插图添加到keyboardVerticalOffset道具中，以便避免视图正常工作。

我现在喜欢标签栏的样式，所以我想保持它的高度、填充和字体大小增加，但也许我在反应原生导航时做错了？也许我不能像 React Native 那样拥有这个标签栏和堆栈导航器样式？无论如何，我相信插图应该返回一个值，所以我认为这就是问题所在。

请注意，如果我将<SafeAreaView>块移动到包围<TouchableWithoutFeedback>而不是包围<NavigationContainer>块，并删除添加到 的 50 个额外像素keyboardVerticalOffset，那么键盘会正确向上推动输入字段，但 iPhone 11 上的标签栏图标被压扁。在我写这篇文章时，我注意到这个变化现在让底部/顶部填充变量返回值？如果我然后删除tabBarOptions，我会得到工作选项卡的基本外观，但我更喜欢我的初始选项卡的设计。

如何保持标签栏的当前样式并让键盘避开每个设备上的聊天输入字段？

（注意：useEffect下面的用法是我尝试使用此问题中概述的解决方案：https ://github.com/th3rdwave/react-native-safe-area-context/issues/54 ）

应用程序.js：

截屏：

包.json：

是否可以仅水平使用反应原生 SafeAreaView ( react-native-safe-area-context)（或删除生成的顶部填充）？例如，在从底部滑动的模式中使用它时，iPhone X 间距会添加到顶部，尽管它实际上离屏幕顶部很远。它应该只在横向的左右添加必要的间距。

我有一个使用画布和一些绘图功能的带有横向屏幕的应用程序。对于某些 android 设备，safeArea 具有边界半径。有没有办法禁用这个边界半径。

无边框半径的设备：

具有边界半径的设备：