问使用ImageBackground的SafeAreaView
EN

Stack Overflow用户

提问于 2018-07-20 16:02:56

回答 1查看 3.8K关注 0票数 4

我目前正在试用支持iPhone X渲染功能的SafeAreaView。问题是，我包含了一个使用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

react-native

iphone-x

回答 1

Stack Overflow用户

发布于 2018-11-16 21:50:42

在react原生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的更新而起作用。但之后我会做一些其他的事情:)

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51437851

复制

相似问题

问使用ImageBackground的SafeAreaView
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用ImageBackground的SafeAreaViewEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用ImageBackground的SafeAreaView
EN