[英]How to set iOS status bar background color in React Native?
Is there a single place in the react native iOS native code that I could modify to set iOS statusbar backgroundColor? react native iOS 本机代码中是否有一个地方可以修改以设置 iOS 状态栏背景颜色? RCTRootView.m ?
RCTRootView.m ?
The react native StatusBar component only support backgroundColor for Android only. react native StatusBar组件仅支持 Android 的backgroundColor 。
The iOS operating system seems to allow setting status bar backgroundColor iOS 操作系统似乎允许设置状态栏背景颜色
iOS doesn't have a concept of a status bar bg. iOS 没有状态栏 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.也许代码中并不清楚,但诀窍是使用适用于 Android 的
StatusBar
,并为 IOS 创建一个“假”状态栏(带有backgroundColor
的View
)。
Add import { StatusBar } from 'react-native';
添加
import { StatusBar } from 'react-native';
to the top of your app.js
and then add StatusBar.setBarStyle('light-content', true);
到
app.js
的顶部,然后添加StatusBar.setBarStyle('light-content', true);
as the first line in your render()
to change the status bar text/icons to white.作为
render()
中的第一行,将状态栏文本/图标更改为白色。
The other color options are 'default'
and 'dark-content'
.其他颜色选项是
'default'
和'dark-content'
。
Refer to https://facebook.github.io/react-native/docs/statusbar.html for further info.有关详细信息,请参阅https://facebook.github.io/react-native/docs/statusbar.html 。
Other than that: no, you would have to follow the link you provided.除此之外:不,您必须点击您提供的链接。
you need to customize it.你需要自定义它。
StatusBar is not part of screen layout in ios else if you use SafeAreaView from reac-native
如果您使用来自reac
reac-native
SafeAreaView,则 StatusBar 不是 ios 屏幕布局的一部分
instead use react-native-safe-area-context and customize it.而是使用react-native-safe-area-context并对其进行自定义。
If you are using react-native-navigation, you need to:如果你使用 react-native-navigation,你需要:
1-) Add this to your info.plist file: 1-) 将此添加到您的 info.plist 文件中:
<key>UIViewControllerBasedStatusBarAppearance</key>
<string>YES</string>
2-) At first line of your render()
function, eg: 2-) 在您的
render()
函数的第一行,例如:
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在 react-native 中设置 iOS 和 Android 状态栏背景颜色
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)
(如果有,则超出 SafeAreaView)
{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
...
Please, make sure to use padding
and not margin
.请确保使用
padding
而不是margin
。 This is my code and it works well in iOS:这是我的代码,它在 iOS 中运行良好:
import { SafeAreaView } from 'react-native'
import { StatusBar } from 'expo-status-bar'
// ...
// ...
return <SafeAreaView style={{ paddingTop: height }}>
{/* your content here */}
<StatusBar style="light" />
</SafeAreaView>
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>
Slightly changed jmurzy 's solution this one should work with android and iOS including iOS with notch:稍微改变了jmurzy的解决方案,这个解决方案应该适用于 android 和 iOS,包括带有缺口的 iOS:
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!如果你使用 React Navigation,那真的很简单!
Just set the headerStyle
, see also documentation here .只需设置
headerStyle
,另请参阅此处的文档。
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
这适用于我的
react-native-safe-area-context
版本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>
</>
)
}
I was able to change the background color of status bar on iOS but updating the backgroundColor
property of the SafeAreaView
component.我能够更改 iOS 上状态栏的背景颜色,但更新了
SafeAreaView
组件的backgroundColor
属性。
<SafeAreaView style={{backgroundColor: 'blue'}}>
// App Content
</SafeAreaView>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.