react-native - react native 底部栏高度

Question

首先，我不确定写成底部栏是否正确。

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

第一个是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);

Answer 1

添加到@DevLover 答案中，因为他是完全正确的。对于适用的屏幕，我通常可能会使用类似于下面的方法。import { useSafeAreaInsets } from 'react-native-safe-area-context';其中我可以获得在组件中使用的插图const insets = useSafeAreaInsets();并使用 insets.bottom 检查底部插图.