React Native-15：状态栏组件-StatusBar

import React, { useState } from 'react'
import
{
    StyleSheet, Text, View, TouchableOpacity,
    StatusBar  // 状态栏组件
} from 'react-native'

const App = () =>
{
    const [DataModel, SetDataModel] = useState({
        // 定义数据模型
        hidden: false,
        barStyle: 'default'
    })
    const changeHidden = () =>
    {
        let hidden = DataModel.hidden ? false : true
        // es6 字面量增强写法 hidden:hidden
        SetDataModel({ ...DataModel, hidden })
    }
    const changeBarStyle = () =>
    {
        let barStyle = DataModel.barStyle == 'light-content' ? 'dark-content' : 'light-content'
        SetDataModel({ ...DataModel, barStyle })
    }
    return (
        <View>
            <StatusBar barStyle={DataModel.barStyle} hidden={DataModel.hidden} />
            <TouchableOpacity style={styles.button} onPress={changeHidden} >
                <Text>显示或者隐藏</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button} onPress={changeBarStyle} >
                <Text>改变主体颜色</Text>
            </TouchableOpacity>
        </View>
    )
}

export default App

const styles = StyleSheet.create({
    container: {

    },
    button: {
        backgroundColor: 'pink',
        width: 100,
        borderRadius: 50,
        alignItems: 'center',
        marginTop: 100

    }
})