React Native expo项目设置app顶部的状态栏

 

 

 

import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { getRouter } from './config'
import { ErrorBoundary } from '../component/light'
import VDebug, { initTrace, setExternalContext } from 'react-native-vdebug'
import { View } from 'react-native'
import { connect } from 'react-redux'
import { StatusBar } from 'expo-status-bar'

const Stack = createNativeStackNavigator()

function Router(props) {
  // Before component Render, perform Proxy Console/Network (Optional)
  initTrace()

  // Context object when the command is executed (Optional)
  setExternalContext('your context')
  return (
    <ErrorBoundary>
      <StatusBar style="auto" hidden={false} backgroundColor='#f6f6f6' />
      <Stack.Navigator initialRouteName="Index">{getRouter()}</Stack.Navigator>
      {props.isDebugger ? (
        <View>
          <VDebug
            // Info panel (Optional)
            info={{ obj: 'your object' }}
          />
        </View>
      ) : null}
    </ErrorBoundary>
  )
}

const mapStateToProps = (state) => {
  return {
    isDebugger: state.getIn(['light', 'isDebugger']),
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onSetState(key, value) {
      dispatch({ type: 'SET_LIGHT_STATE', key, value })
    },
    onDispatch(action) {
      dispatch(action)
    },
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Router)

backgroundColor='#ff0000' 

 hidden={true}

 

参考链接：

https://docs.expo.dev/versions/latest/sdk/status-bar/#installation

StatusBar · React Native 中文网 

https://chat.xutongbao.top/