React native 反应本机底杆高度

首先，我不确定作为底部栏写是否正确

无论如何，我将在底部放置一个按钮，但由于手机的原因，它无法按预期工作

第一个是iPhone11，第二个是iPhone8

因此，由于我想从底部留出一些间隙，第一张图像看起来不错。这是我想要的，但第二张图片不是。 （注意：我使用的是SafeAreaView）

我已经附上了组件的代码。（黄色按钮）

import React，{memo}来自“React”；
从“react native”导入{TouchableOpacity，Image，StyleSheet}；
const NextButton=（{goNext，…props}）=>(
);
const styles=StyleSheet.create({
容器：{
位置：'绝对'，
底部：0，
右:0,，
},
图片：{
宽度：48，
身高：48，
背景颜色：“#d0cf22”，
边界半径：10，
},
});
导出默认备忘（下一个按钮）；

我想你把那个按钮包装在了

安全区域视图中

这样iPhone X就有了一些空间

我认为你应该得到安全区域的底部尺寸，并根据它设置边距

import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'

//Retrieve safe area insets for the root view

SafeArea.getSafeAreaInsetsForRootView()
.then((result) => {
   console.log(result)
   // { safeAreaInsets: { top: 44, left: 0, bottom: 34, right: 0 } }
})

---

参考资料：

我想你把那个按钮包装在了

安全区域视图中

这样iPhone X中就有了一些空间

我认为你应该得到安全区域的底部尺寸，并根据它设置边距

import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'

//Retrieve safe area insets for the root view

SafeArea.getSafeAreaInsetsForRootView()
.then((result) => {
   console.log(result)
   // { safeAreaInsets: { top: 44, left: 0, bottom: 34, right: 0 } }
})

---

参考资料：

添加到@DevLover答案中，因为他完全正确。对于适用的屏幕，我通常会使用类似于下面的方法

从'react native safe-area-context'导入{useSafeaInsets}

我可以在组件中使用其中的插图

const insets=useSafeareInsets（）

并使用
插图检查底部插图。bottom
添加到@DevLover答案中，因为他完全正确。对于适用的屏幕，我通常会使用类似于下面的方法

从'react native safe-area-context'导入{useSafeaInsets}

我可以在组件中使用其中的插图

const insets=useSafeareInsets（）

使用
插图检查底部插图。底部
您至少能告诉我们它以哪种方式不起作用吗？你期待什么样的行为？你会观察到哪些行为？你为什么早就期望它不起作用了？@PatrickBeynio，我编辑过。我想让它看起来像第一张图片，而不是第二张。你能至少告诉我们它在哪一方面不起作用吗？你期待什么样的行为？你会观察到哪些行为？你为什么早就期望它不起作用了？@PatrickBeynio，我编辑过。我想让它看起来像第一张图片，而不是第二张。
useSafeArea
现在已被弃用。您应该改用
useSafetAreaInsets
useSafeArea
现在已不推荐使用。您应该改用
useSafetAreaInsets
。