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 { useSafeArea } from 'react-native-safe-area-context';

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

const insets = useSafeArea();

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

Answer 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?

反应本机底栏高度

2 个答案: