react native 狀態欄和安全區域的使用

1.  狀態欄組件，react native文檔提供了說明。我需要的是設置透明效果，如下圖。

代碼如下

 <StatusBar translucent={true} backgroundColor="rgba(0, 0, 0, 0)" />

 解釋：StatusBar設置在哪個頁面，加載該頁面時才會生效。而且作用全局。我們的項目需要，僅僅是透明就可以，我就在登陸界面設置就可以。

 

2.  安全區域，react native文檔提供了safeAreaView，但有問題目前支持IOS,不兼容Android 。我使用了react-navigation里提供的safeAreaView，會導致狀態欄透明修過不對。最后采用了第三方庫。

react-native-safe-area-view 中它提供的safeAreaView。

 

最后總的代碼

import * as React from 'react';
import { View,Text, StatusBar, Button, StyleSheet,ImageBackground } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// 導入 SafeAreaProvider ，包裹根組件路由
import { SafeAreaProvider } from 'react-native-safe-area-context';
// 包裹組件
import SafeAreaView from 'react-native-safe-area-view';


function Screen1({ navigation }) {
  return (
      <SafeAreaView style={[styles.container]}>
        <StatusBar translucent={true} backgroundColor="rgba(0, 0, 0, 0)" />
        <ImageBackground style={[styles.imgBackground]} source={require('./img/my_img_bg.png')}>      
            <Text>你好世界</Text>       
        </ImageBackground>
        <Text style={{color: '#fff'}}>Light Screen</Text>
        <Button
          title="Next screen"
          onPress={() => navigation.navigate('Screen2')}
          color="#fff"
        />
      </SafeAreaView>
  );
}

function Screen2({ navigation }) {
  return (
    <SafeAreaView style={[styles.container]}>
      <StatusBar  translucent={true} backgroundColor="rgba(0, 0, 0, 0)" />
      <ImageBackground style={[styles.imgBackground]} source={require('./img/my_img_bg.png')}>      
            <Text>另一個組件</Text>       
        </ImageBackground>
      <Button
        title="Next screen"
        onPress={() => navigation.navigate('Screen1')}
      />
    </SafeAreaView>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator headerMode="none">
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="Screen2" component={Screen2} />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  imgBackground:{ 
    flex:0,
    height: 280,
    width:"100%",
  },
});

 

3.  每個頁面，不同的statusBar