带图像背景的 SafeAreaView

Question

我目前正在尝试SafeAreaView支持 iPhone X 渲染功能。问题是，我使用了ImageBackground来自react-native 的组件包含了一个图像。

有没有办法将图像也渲染为状态栏的背景？

当前代码：

<SafeAreaView style={{flex: 1}}>
  <StyleProvider style={getTheme(variables)}>
    <Container>
      <ImageBackground source={landingpageBg} style={styles.imageContainer}>
        <View
          style={{
            flex: 1,
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "transparent"
          }}
        >
          <H3 style={styles.text}>Hello World</H3>
          <View style={{ marginTop: 8 }} />
          <Button
            style={styles.buttonColor}
            onPress={() => this.pressButton()}
          >
            <Text>Let's Go!</Text>
          </Button>
        </View>
      </ImageBackground>
    </Container>
  </StyleProvider>
</SafeAreaView>

目前的样子

Answer 1

在 React Native 0.57 上，我让它以这种方式工作：

<ImageBackground
  source={landingpageBg}
  style={{height: null,
          width: windowSize.width,
          resizeMode: "cover",
          overflow: "hidden",
          flex: 1}}>
  <SafeAreaView style={{opacity: 0}} />
  <View style={{flex: 1}}>
    ...your stuff
  </View>
  <SafeAreaView style={{opacity: 0}} />
</ImageBackground>

关键是 SafeAreaView 可以用作页眉/页脚，而无需将所有内容都包含在其中。我不知道你的Container或StyleProvider类做什么，但我希望可以Container代替View我所做的。

最后，我不知道随着 React Native 的更新，这个解决方案是否会起作用。但接下来我会想出别的办法:)