Просмотр с абсолютной позицией в SafeAreaView в React Native

Question

Мне нужно разместить <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>
  );

Answer 1

У меня была та же проблема, я исправил ее, обернув абсолютный элемент другим представлением.

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

Answer 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
    })
}