React Native中的SafeArea透明背景

Question

我在我的屏幕中使用SafeAreaView，它可以正常工作，但我希望它的背景是透明的，而不是固定的颜色。实际上，我希望我的屏幕背景图片显示在safeAreaView下面。请问如何处理呢？"

- Pouya92

Answer 1

如果您想使用图像背景，则将safeAreaView嵌套在ImageBackground中。

class App extends React.Component{
 render(){
  return(
     <ImageBackground 
       source={{uri:'https://wallpapershome.com/images/pages/pic_v/3443.jpg'}} 
       style={{height:Dimensions.get('window').height, 
       width:Dimensions.get('window').width, overflow:'hidden', flex:1}}
       > 
        <SafeAreaView>
         //whatever content
        </SafeAreaView>

      </ImageBackground>
     )
   }
 }

- displayname

Answer 2

只需从您的SafeAreaView样式中删除paddingTop，它就会忽略代码中所示的backgroundColor: "#ffffff"。 通过这样做，您将实现在React Native中的安全区透明背景

    <SafeAreaView style={styles.flex}>
      <StatusBar
        barStyle={barStyle}
        backgroundColor={'transparent'}
        translucent={true}
        animated={true}
      />
      <View
        style={[
          theme == LIGHT_MODE ? styles.containerLight : styles.containerDark,
          style,
        ]}>
        {children}
      </View>
    </SafeAreaView>

  flex: () => ({
    flex: 1,
    backgroundColor: "#ffffff",
    paddingTop: Platform.OS == 'android' ? StatusBar.currentHeight : 30,
  }),

- Syed Amir Ali