在 React Native 中的 SafeAreaView 中以绝对位置查看答案

【问题标题】：View with absolute position in SafeAreaView in React Native在 React Native 中的 SafeAreaView 中以绝对位置查看
【发布时间】：2021-04-09 05:11:58
【问题描述】：

我需要将<View> 和position: 'absolute' 放在一起，这样它就可以覆盖下面的另一个视图。我希望它不会出现在 iOS 的状态栏后面，所以我将所有内容都放在了 <SafeAreaView> 中。

不幸的是，绝对位置似乎是相对于全屏而不是其父视图（SafeAreaView）。

有什么诀窍吗？

const styles = StyleSheet.create({
    safeAreaView: {
      flex: 1,
    },
    map: {
      flex: 1,
    },
    userLocationButton: {
      position: 'absolute',
      right: 12,
      top: 12,
    },
  });

  return (
    <SafeAreaView style={styles.safeAreaView}>
        <ClusteredMapView style={styles.map} />
      )}
        <TouchableOpacity style={styles.userLocationButton}>
          <Image source={UserLocationButton} />
        </TouchableOpacity>
      )}
    </SafeAreaView>
  );

【问题讨论】：

标签： react-native absolute safeareaview

【解决方案1】：

我遇到了同样的问题，通过用另一个视图包装绝对元素来解决它。

<SafeAreaView style={{flex: 1}}>
    <View style={{flex: 1}}>
        <TouchableOpacity style={{height: 40, width: 40, borderRadius: 20}} />
    </View>
</SafeAreaView>

【讨论】：

记住（我是 RN 新手，所以我不知道这一点）将 pointerEvents="box-none" 添加到 View，所以下面的地图也会获取触摸事件。跨度>
这是如何工作的？我试过了，但不幸的是没有为我工作......

【解决方案2】：

在绝对样式的顶部添加状态栏大小值

从此函数getStatusBarHeight()获取状态栏大小

import { Dimensions, Platform, StatusBar } from 'react-native';
function isIphoneX() {
  const dimen = Dimensions.get('window');
  return (
    Platform.OS === 'ios' &&
    !Platform.isPad &&
    !Platform.isTVOS &&
    (dimen.height === 812 ||
      dimen.width === 812 ||
      (dimen.height === 896 || dimen.width === 896))
  );
}
export function getStatusBarHeight(skipAndroid) {
    return Platform.select({
        ios: isIPhoneX() ? 44 : 20,
        android: skipAndroid ? 0 : StatusBar.currentHeight,
        default: 0
    })
}

【讨论】：

不幸的是，此解决方案仅适用于纵向，但在横向时，状态栏高度应为 0。我知道我也可以观察方向，但我想知道是否有一种自动方法来处理它…
它可以工作，但我希望其他可以在 SafeAreaView 内设置按钮的解决方案甚至使用绝对

【解决方案3】：

在我的案例中，有帮助的是将 overflow: hidden 样式添加到 View 元素上方的 absolute 位置。

<SafeAreaView style={{ flex: 1 }}>
    <View style={{ overflow: 'hidden' }}>
        <View style={{ position: 'absolute' }}></View>
    </View>
</SafeAreaView>

【讨论】：