[react-native] 06 Switch + Status Bar

导入import Index from './demo_05_switch/index.js'

最常见的 隐藏 状态栏

<StatusBar hidden={true} />

<StatusBar  
    hidden={false}  
    backgroundColor="red" // 只在安卓应用下面有效  
    barStyle={'dark-content'}  
    // barStyle={'light-content'}  
/>

声明构造函数

// 声明构造函数  
constructor(){  
    super()  

    this.state = {  
        hideStatusBar:false  
    }  
}

toggle函数 取非

toggleStatusBar = () => {  
    this.setState({hideStatusBar:!this.state.hideStatusBar})  
}

switch 绑定事件

<Switch  
    trackColor={{false:'red', true:'green'}}  
    thumbColor={'blue'}  
    value={this.state.hideStatusBar}  
    onValueChange={this.toggleStatusBar}  
/>

点击前

点击后

完整代码

import React, {Component} from 'react'  
import {Text, View, ScrollView, StyleSheet, StatusBar, Switch} from 'react-native'  
  
export default class FlexDirection extends Component{  
// 声明构造函数  
constructor(){  
super()  
  
this.state = {  
hideStatusBar:false  
}  
}  
  
toggleStatusBar = () => {  
this.setState({hideStatusBar:!this.state.hideStatusBar})  
}  
render(){  
return (  
<View style={[styles.container]}>  
<StatusBar  
hidden={this.state.hideStatusBar}  
backgroundColor="red" // 只在安卓应用下面有效  
barStyle={'dark-content'}  
// barStyle={'light-content'}  
/>  
<Switch  
trackColor={{false:'red', true:'green'}}  
thumbColor={'blue'}  
value={this.state.hideStatusBar}  
onValueChange={this.toggleStatusBar}  
/>  
</View>  
)  
}  
}  
  
const styles = StyleSheet.create({  
container:{  
flex:1,  
justifyContent:'center',  
alignItems:'center'  
}  
})