如何设置 iOS 状态栏背景颜色在反应本机？

Add import { StatusBar } from 'react-native'; to the top of your app.js and then add StatusBar.setBarStyle('light-content', true); as the first line in your render() to change the status bar text/icons to white.

The other color options are 'default' and 'dark-content'.

Refer to https://facebook.github.io/react-native/docs/statusbar.html for further info.

Other than that: no, you would have to follow the link you provided.

iOS doesn't have a concept of a status bar bg. Here's how you'd achieve this in a cross-platform way:

import React, {
Component,
} from 'react';
import {
AppRegistry,
StyleSheet,
View,
StatusBar,
Platform,
SafeAreaView
} from 'react-native';


const MyStatusBar = ({backgroundColor, ...props}) => (
<View style={[styles.statusBar, { backgroundColor }]}>
<SafeAreaView>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</SafeAreaView>
</View>
);


class DarkTheme extends Component {
render() {
return (
<View style={styles.container}>
<MyStatusBar backgroundColor="#5E8D48" barStyle="light-content" />
<View style={styles.appBar} />
<View style={styles.content} />
</View>
);
}
}


const STATUSBAR_HEIGHT = StatusBar.currentHeight;
const APPBAR_HEIGHT = Platform.OS === 'ios' ? 44 : 56;


const styles = StyleSheet.create({
container: {
flex: 1,
},
statusBar: {
height: STATUSBAR_HEIGHT,
},
appBar: {
backgroundColor:'#79B45D',
height: APPBAR_HEIGHT,
},
content: {
flex: 1,
backgroundColor: '#33373B',
},
});


AppRegistry.registerComponent('App', () => DarkTheme);

Maybe it's not clear in the code, but the trick is to use StatusBar, which works for Android, and create a "fake" status bar (a View with backgroundColor) for IOS.

If you are using react-native-navigation, you need to:

1-) Add this to your info.plist file:

<key>UIViewControllerBasedStatusBarAppearance</key>
<string>YES</string>

2-) At first line of your render() function, eg:

  render(){
this.props.navigator.setStyle({
statusBarTextColorScheme: 'light'
});
return (
<Login navigator={this.props.navigator}></Login>
);
}

This example will transform your status bar to light text/buttons/icons color.

set iOS & Android statusbar backgroundColor in react-native

    import React, { Component } from 'react';
import { Platform, StyleSheet, View, StatusBar } from 'react-native';
import Constants from 'expo-constants';




class Statusbar extends Component {


render() {
return (
<View style={styles.StatusBar}>
<StatusBar translucent barStyle="light-content" />
</View>
);
}
}


const styles = StyleSheet.create({
StatusBar: {
height: Constants.statusBarHeight,
backgroundColor: 'rgba(22,7,92,1)'
}
});


export default Statusbar;

Add to root view. (Out of SafeAreaView if has)

{Platform.OS === 'ios' &&
<View style=\{\{
width: "100%",
height: 100, // For all devices, even X, XS Max
position: 'absolute',
top: 0,
left: 0,
backgroundColor: "red"}}
/>}
// App screen
...

import {SafeAreaConsumer} from 'react-native-safe-area-context';


<SafeAreaConsumer>
{(insets)=>(
<View style=\{\{flex:1}}>
<View style=\{\{height:insets.top ,backgroundColor :"black"}}/>
<StatusBar barStyle="light-content"/>
<View style=\{\{flex:1}}>
<Text>My Text</Text>
</View>
</View>
)}
</SafeAreaConsumer>

you need to customize it.
StatusBar is not part of screen layout in ios else if you use SafeAreaView from reac-native

instead use react-native-safe-area-context and customize it.

see this snack.

I was able to change the background color of status bar on iOS but updating the backgroundColor property of the SafeAreaView component.

<SafeAreaView style=\{\{backgroundColor: 'blue'}}>
// App Content
</SafeAreaView>

Please, make sure to use padding and not margin. This is my code and it works well in iOS:

import { SafeAreaView } from 'react-native'
import { StatusBar } from 'expo-status-bar'
// ...
// ...
return <SafeAreaView style=\{\{ paddingTop: height }}>
{/* your content here */}
<StatusBar style="light" />
</SafeAreaView>

Slightly changed jmurzy's solution this one should work with android and iOS including iOS with notch:

import React from 'react'
import { SafeAreaView, StatusBar, View } from 'react-native'
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'


const App = () => {
const isDarkMode = true
return (
<SafeAreaProvider>
<CustomStatusBar
barStyle={isDarkMode ? 'light-content' : 'dark-content'}
backgroundColor={'red'}
/>
<SafeAreaView style=\{\{ flex: 1 }}>


                

</SafeAreaView>
</SafeAreaProvider>
)
}


export default App


const CustomStatusBar = ({backgroundColor, ...props}) => {
const { top } = useSafeAreaInsets()


return (
<View style=\{\{ height: (StatusBar.currentHeight || top), backgroundColor }}>
<SafeAreaView style=\{\{ backgroundColor }}>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</SafeAreaView>
</View>
)
}

If you are using React Navigation it is really easy!

Just set the headerStyle, see also documentation here.

Something like

<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
options=\{\{
title: 'my app',
headerStyle: {
backgroundColor: 'green',
},
}}
/>
</Stack.Navigator>

This works for me with react-native-safe-area-context version 3.3.2

import { StatusBar } from "react-native"
import { SafeAreaProvider, SafeAreaView } from "react-native-safe-area-context"


const App = () => {


const theme = ... get your theme


return (
<>
<StatusBar
backgroundColor={theme === "light" ? "#fff" : "#000"}
barStyle={theme === "light" ? "dark-content" : "light-content"}
/>
<SafeAreaProvider>
<SafeAreaView
style=\{\{
flex: 1,
backgroundColor: theme === "light" ? "#fff" : "#000",
}}
>


// stuff goes here


</SafeAreaView>
</SafeAreaProvider>
</>
)
}