移动跨平台框架React Native状态栏组件StatusBar【16】
移动跨平台框架React Native状态栏组件StatusBar【16】
React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native 是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。
React Native 状态栏组件 StatusBar
状态栏 StatusBar 就是手机屏幕最顶上一个区域，包含 运营商名称、网络情况、电池情况那一条。
暗色系
亮色系
在 React Native 中我们可以定制 状态栏 StatusBar 。当然了，说是定制，无非以下几点
- 显示或隐藏状态栏。
- 设置主题色：亮色系还是暗色系。
- 设置显示或隐藏时是否启用动画。
React Native 提供了 `` 组件来做上面这些事情。
引入组件
import { StatusBar } from 'react-native'使用语法
<StatusBar
barStyle = "dark-content|light-content"
hidden = {true|false}
animated = {true|false}
/>注意
React Native 中的 StatusBar 采用覆盖规则，我们可以在一个页面中定义多个 。 后面定义的 的属性会覆盖前一个 `` 设置的属性。
<View>
<StatusBar backgroundColor="blue" barStyle="light-content" />
<View>
<StatusBar hidden={route.statusBarHidden} />
...
</View>
</View>静态方法
除了可以使用属性来设置状态栏外，React Native 中的 StatusBar 还提供了一些静态方法用来设置状态栏。
枚举常量
- StatusBarStyle
StatusBarStyle枚举常量定义了状态栏可用的主题色. 值说明 值说明default默认主题色，iOS 上是dark-content，Android 是light-contentlight-content暗色的背景，亮色的文字和图标dark-content亮色的背景，暗色的文字和图标( Android 要求 API >= 23 ) - StatusBarAnimation
StatusBarAnimation枚举常量定义了状态栏可用的动画效果。 值说明 值说明none默认，没有动画效果fade渐隐渐现动画效果slide渐入渐出动画效果
范例
范例 1
下面的代码，我们设置状态栏 StatusBar 的主题色为 暗色系，同时显示状态栏。
App.js
import React, { Component } from 'react';
import { StatusBar } from 'react-native'
const App = () => {
return (
<StatusBar barStyle = "dark-content" hidden={false} />
)
}
export default App运行效果如下
范例2
下面的代码，我们使用脚本来控制状态栏的显示和隐藏，使用脚本来控制状态栏的主题色
App.js
import React, { Component } from 'react';
import {View, Text, StatusBar, StyleSheet, TouchableOpacity} from 'react-native'
class App extends Component {
state = {
hidden:false,
barStyle:'default'
}
changeHidden = () =>{
var hidden = this.state.hidden ? false : true;
this.setState({ hidden: hidden })
}
changeBarStyle = () =>{
var barStyle = this.state.barStyle == 'light-content' ? 'dark-content' : 'light-content';
this.setState({ barStyle: barStyle })
}
render() {
return (
<View>
<StatusBar barStyle = {this.state.barStyle} hidden={this.state.hidden} />
<TouchableOpacity style={styles.button} onPress = {this.changeHidden}>
<Text>显示或隐藏</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.button} onPress = {this.changeBarStyle}>
<Text>改变主题色</Text>
</TouchableOpacity>
</View>
)
}
}
export default App
const styles = StyleSheet.create ({
button: {
backgroundColor: '#4ba37b',
width: 100,
borderRadius: 50,
alignItems: 'center',
marginTop: 100
}
})演示效果如下
大家知道为什么隐藏的时候有一条黑色的条吗？
“” src=“https://www.twle.cn/static/upload/img/2019/07/11/20190711080818_4.mp4” style=“box-sizing: border-box; display: inline-block; vertical-align: baseline;”>
大家知道为什么隐藏的时候有一条黑色的条吗？
那是因为的实体机是全屏手机，顶部的中央有一个 摄像头。