反应原生底部栏高度答案

【问题标题】：React Native Bottom Bar Height反应原生底部栏高度
【发布时间】：2021-05-25 14:04:29
【问题描述】：

首先，我不确定写成Bottom Bar是否正确。

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

第一个是 iphone 11，第二个是 iphone 8。

所以我想从底部留出一些空隙，所以第一张图片看起来不错。这就是我想要的，但第二张图片不是。（注意：我使用的是 SafeAreaView）

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

import React, {memo} from 'react';
import {TouchableOpacity, Image, StyleSheet} from 'react-native';

const NextButton = ({goNext, ...props}) => (
  <TouchableOpacity onPress={goNext} style={[styles.container, props]}>
    <Image style={styles.image} source={require('../assets/arrow_next.png')} />
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    bottom: 0,
    right: 0,
  },
  image: {
    width: 48,
    height: 48,
    backgroundColor: '#d0cf22',
    borderRadius: 10,
  },
});

export default memo(NextButton);

【问题讨论】：

您至少能告诉我们它在哪些方面不起作用吗？您期望哪种行为？而你观察到的是哪种行为？为什么你已经预料到它不工作了？
@PatrickBeynio 我已经编辑过了。我想让它像第一张图片，而不是第二张。

标签： react-native

【解决方案1】：

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

import { useSafeAreaInsets } from 'react-native-safe-area-context';

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

const insets = useSafeAreaInsets();

并使用insets.bottom 检查底部插图。

【讨论】：

useSafeArea 现在已弃用。您应该改用useSafeAreaInsets。 Source

【解决方案2】：

我认为您将那个按钮包裹在 SafeAreaView 中，所以 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 } }
})

参考：How to know the useful height of an iOS device in React Native?

【讨论】：