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);

标签： react-native

Answer 1

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

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

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

const insets = useSafeAreaInsets();

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