rn 顶部状态栏组件StatusBar

你的名字 2021-07-24 14:57 913阅读 0赞

状态栏组件
    <StatusBar />
    	
    	属性:
    	backgroundColor='设置状态栏背景颜色'
    	barStyle="dark-content/light-content"; 设置文字是否高亮显示
    	hidden:{布尔值};  是否显示状态栏

代码示例:

import React,{ Component} from 'react'
    import { View,Text,StatusBar,StyleSheet,TouchableOpacity} from 'react-native'
    
    export default class App extends Component{ 
        state={ 
            hidden:false,
            barStyle:'default'
        }
        show=()=>{ 
            var hidden=!this.state.hidden;
            this.setState({ 
                hidden:hidden
            })
        }
    
        changeStyle=()=>{ 
            var barStyle=this.state.barStyle=='light-content'?'dark-content':'light-content'
            this.setState({ 
                barStyle:barStyle
            })
        }
    
        render(){ 
            return(
                <>
                    <View>
                        <StatusBar backgroundColor='red' barStyle={ this.state.barStyle} hidden={ this.state.hidden} />
                        <TouchableOpacity style={ style.button} onPress={ this.show}>
                            <Text>开关</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={ style.button} onPress={ this.changeStyle}>
                            <Text>改变主题颜色</Text>
                        </TouchableOpacity>
                    </View>
                </>
            )
        }
    }
    
    const style=StyleSheet.create({ 
        button:{ 
            backgroundColor:'#4ba37b',
            width:100,
            borderRadius:50,
            alignItems:"center",
            marginTop:100
    
    
        }
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，913人围观）

还没有评论，来说两句吧...

相关阅读

相关（九）Swift StatusBar 状态栏

修改StatusBar 的文字为白色 1、找到Info.plist，右键 ->Add Row 增加属性， Name：View controller-based stat

水深无声/ 2022年08月17日 15:28/ 0 赞/ 241 阅读

相关 cordova-plugin-statusbar状态栏设置整理

一、Cordova StatusBar简介 1.全局对象StatusBar 提供了修改设备状态栏的方法，需要在deviceready事件之后使用。 2.iOS中接口都支持，

阳光穿透心脏的1/2处/ 2022年07月12日 14:53/ 0 赞/ 497 阅读

相关 React Native中状态栏设置StatusBar

组件介绍 StatusBar 是 React Native 用来设置并动态改变设备的状态栏显示特性。可以通过设置StatusBar的样式实现不同页面状态栏的显示。

墨蓝/ 2022年06月10日 14:37/ 0 赞/ 711 阅读

相关 ios 状态栏statusBar的背景颜色

`一、无导航条的情况：` `系统默认状态栏的字体颜色为黑色，即UIStatusBarStyle=UIStatusBarStyleDefault，同时背景颜

一时失言乱红尘/ 2022年05月29日 11:43/ 0 赞/ 498 阅读

相关 React-Native- 状态栏组件（StatusBar）的使用详解

-------------------- React Native - 状态栏组件（StatusBar）的使用详解一、StatusBar组件介绍 Stat

墨蓝/ 2022年05月09日 09:24/ 0 赞/ 1076 阅读

相关 QT状态栏（statusbar）用法

状态栏显示的信息分3种 1. 一般信息，用QLabel 代表 2. 永久信息，文本会一直显示在状态栏的最右边。 3. 临时信息，指定信息现实的时间。时间到即信息消失

今天药忘吃喽~/ 2022年04月12日 11:29/ 0 赞/ 936 阅读

相关 android 去掉顶部状态栏

在anroid 的AndroidManifest.xml里添加 <application android:theme="@android:style/

向右看齐/ 2022年04月10日 08:55/ 0 赞/ 339 阅读

相关 rn 通过导航组件修改顶部导航栏信息

方式一:将选项配置变成函数,根据传递的参数动态改变标题 <Stack.Screen name="xx"

柔情只为你懂/ 2021年07月24日 20:23/ 0 赞/ 876 阅读

相关 rn 顶部状态栏组件StatusBar

状态栏组件 <StatusBar /> 属性: backgroundColor='设置状态栏背景颜色' barStyl

你的名字/ 2021年07月24日 14:57/ 0 赞/ 914 阅读

相关 rn 顶部导航栏

(1)安装 yarn add @react-navigation/native yarn add react-native-gesture-hand

逃离我推掉我的手/ 2021年07月24日 12:45/ 0 赞/ 769 阅读