在 React Native 中的 SafeAreaView 中使用绝对位置查看

Question

我需要放置一个<View>withposition: '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>
  );

Answer 1

我有同样的问题，通过用另一个视图包装绝对元素来修复它。

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