У меня есть SafeAreaView в корне моего приложения, но я хочу полноэкранный backgroundColor (включая верх и низ SafeAreaView) на нескольких экранах в приложении

Question

Я использую SafeAreaView в корне моего проекта App.js.Но некоторым экранам нужен полностью белый фон сверху вниз.Так как я использую SafeAreaView в корне, каждый вид экрана начинается после SafeAreaView, даже создание вида с absolute положением высоты SafeAreaView не работает так:

render() {
  return (
    <View style={styles.container}>
      <View style={[styles.hideSafeAreaView, { top: 0 }]} />
      {/*....*/}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: whiteTextColor,
    padding: 12
  },
  hideSafeAreaView: {
    position: "absolute",
    backgroundColor: whiteTextColor,
    right: 0,
    left: 0,
    height: 44
  }
});

Это мой app.js

render() {
  return (
    <ImageBackground style={styles.container} source={APP_BACKGROUND_IMAGE}>
      <SafeAreaView style={styles.container}>
        <AppNavigator />
      </SafeAreaView>
    </ImageBackground>
  );
}

Заранее спасибо.

Answer 1

Я нашел простой трюк для этого.Я удалил корневой компонент формы SafeAreaView и создал собственный заголовок высотой 44. Я использовал этот многоразовый заголовок во всех файлах, где я хотел, чтобы SafeAreaView работал.