react native 针对每个页面不同的StatusBar
官网参考地址:Different status bar configuration based on route · React Navigation
新的版本将不再使用StatusBar组件,而使用SafeAreaView。
直接上代码：
Home页面
import React, { Component } from "react";
import {
StyleSheet,
Text,
Image,
View,
StatusBar,
SafeAreaView,
isAndroid
} from "react-native";
import Headerapp from "./components/Header";
export default class Index extends Component {
render() {
return (
<SafeAreaView style={{backgroundColor:'#e12828',height:1}}>
<View style={styles.container}>
<Headerapp />
</View>
</SafeAreaView>
);
}
componentDidMount() {
this._navListener = this.props.navigation.addListener('didFocus', () => {
StatusBar.setBarStyle('light-content'); //状态栏文字颜色
StatusBar.setBackgroundColor('#e12828'); //状态栏背景色
});
}
componentWillUnmount() {
this._navListener.remove();
}
}
const styles = StyleSheet.create({
container: {
flex: 1
}
});
Video页面：
import React, { Component } from "react";
import {
AppRegistry,
StyleSheet,
Text,
Image,
View,
TouchableOpacity,
SafeAreaView,
StatusBar,
isAndroid
} from "react-native";
export default class Index extends Component {
render() {
return (
<SafeAreaView style={{backgroundColor:'#9626e4'}}>
<View style={styles.container}>
<Text>视频界面</Text>
</View>
</SafeAreaView>
);
}
componentDidMount() {
this._navListener = this.props.navigation.addListener("didFocus", () => {
StatusBar.setBarStyle("dark-content"); //状态栏文字颜色
StatusBar.setBackgroundColor("#ffffff"); //状态栏背景色
});
}
componentWillUnmount() {
this._navListener.remove();
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F5FCFF"
}
});
