react native iOS 本机代码中是否有一个地方可以修改以设置 iOS 状态栏背景颜色?RCTRootView.m ?
react native StatusBar组件仅支持Android的backgroundColor。
react native iOS 本机代码中是否有一个地方可以修改以设置 iOS 状态栏背景颜色?RCTRootView.m ?
react native StatusBar组件仅支持Android的backgroundColor。
iOS 没有状态栏 bg 的概念。以下是您如何以跨平台方式实现这一目标:
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);
添加import { StatusBar } from 'react-native';
到您的顶部,app.js
然后添加StatusBar.setBarStyle('light-content', true);
为您的第一行render()
以将状态栏文本/图标更改为白色。
其他颜色选项是'default'
和'dark-content'
。
有关详细信息,请参阅https://facebook.github.io/react-native/docs/statusbar.html。
除此之外:不,您必须点击您提供的链接。
如果你使用 react-native-navigation,你需要:
1-) 将此添加到您的 info.plist 文件中:
<key>UIViewControllerBasedStatusBarAppearance</key>
<string>YES</string>
2-) 在render()
函数的第一行,例如:
render(){
this.props.navigator.setStyle({
statusBarTextColorScheme: 'light'
});
return (
<Login navigator={this.props.navigator}></Login>
);
}
在 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;
你需要自定义它。如果您使用SafeAreaView,
则 StatusBar 不是 ios 屏幕布局的一部分reac-native
而是使用react-native-safe-area-context并对其进行自定义。
看到这个小吃。
添加到根视图。(如果有,则超出 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
...
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>
请确保使用padding
而不是margin
. 这是我的代码,它在 iOS 中运行良好:
import { SafeAreaView } from 'react-native'
import { StatusBar } from 'expo-status-bar'
// ...
// ...
return <SafeAreaView style={{ paddingTop: height }}>
{/* your content here */}
<StatusBar style="light" />
</SafeAreaView>
稍微改变了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>
)
}
如果你使用 React Navigation,那真的很简单!
只需设置headerStyle
,另请参阅此处的文档。
就像是
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
title: 'my app',
headerStyle: {
backgroundColor: 'green',
},
}}
/>
</Stack.Navigator>
这适用于我的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>
</>
)
}
我能够更改 iOS 上状态栏的背景颜色,但更新 了组件的backgroundColor
属性。SafeAreaView
<SafeAreaView style={{backgroundColor: 'blue'}}>
// App Content
</SafeAreaView>