移动跨平台框架React Native状态栏组件StatusBar【16】

江一铭

发布于 2022-06-17 14:51:28

2.7K0

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;”>

大家知道为什么隐藏的时候有一条黑色的条吗？

那是因为的实体机是全屏手机，顶部的中央有一个 摄像头。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-20，如有侵权请联系 cloudcommunity@tencent.com 删除

react