react-native - 带有图像背景的 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>

How it currently looks like

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 的更新而起作用。但后来我会想出别的东西:)