Question

我目前正在尝试SafeAreaView以支持iPhone X渲染功能。事实是，我正在使用来自react-native的ImageBackground组件添加图像。

是否还有一种方法可以将图像渲染为状态栏的背景？

当前代码：

<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的更新，该解决方案是否会起作用。但是然后我会解决其他问题：）

带ImageBackground的SafeAreaView

1 个答案: