在React Native iOS原生代码中,有一个地方可以修改以设置iOS状态栏的背景颜色吗?是RCTRootView.m吗?
React Native StatusBar 组件仅支持 Android 平台的backgroundColor属性。
在React Native iOS原生代码中,有一个地方可以修改以设置iOS状态栏的背景颜色吗?是RCTRootView.m吗?
React Native StatusBar 组件仅支持 Android 平台的backgroundColor属性。
iOS没有状态栏背景的概念。以下是如何以跨平台的方式实现此目标:
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);
也许代码中并不清楚,但窍门在于使用StatusBar
,它适用于Android,并为IOS创建一个“假”的状态栏(一个具有backgroundColor
的View
)。
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。除此之外:不,你需要按照提供的链接进行操作。{'dark-content', true}
。 - Raphael Pinel需要自定义它。
在iOS中,StatusBar不是屏幕布局的一部分,除非您使用来自react-native
的SafeAreaView
相反,请使用react-native-safe-area-context并对其进行自定义。
请参见此snack。
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>
</>
)
}
在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;
<key>UIViewControllerBasedStatusBarAppearance</key>
<string>YES</string>
2-) 在你的render()
函数的第一行,例如:
render(){
this.props.navigator.setStyle({
statusBarTextColorScheme: 'light'
});
return (
<Login navigator={this.props.navigator}></Login>
);
}
{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
...
请务必使用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>
你只需要使用SafeAreaView元素,但在标题后立即关闭它,并额外将页面包裹在一个简单的View元素中。这样你就可以只设置SafeAreaView的背景颜色,从而得到所期望的结果。
SafeAreaView
。除非你有新的内容可以贡献,否则请不要发表回答。你可以通过点赞来支持原始回答。 - Ben A.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>