react-native(리액트 네이티브) component - StatusBar

react-native(리액트 네이티브) component - StatusBar

import React, {Component} from 'react';

import {

View,

Text,

ScrollView,

StatusBar,

StyleSheet,

TouchableOpacity,

} from 'react-native';

export default class extends Component {

constructor(props) {

super(props);

this.state = {

value : 1,

hiddenType : false,

}

}

_changeHidden = () => {

this.setState({

hiddenType: !this.state.hiddenType,

});

}

render() {

return (

<ScrollView style={styles.Contents}>

<StatusBar

animated={true}

hidden={this.state.hiddenType}

backgroundColor="blue" // 안드로이드용

barStyle="default" // IOS용

style={{backgroundColor: "red"}}

/>

<TouchableOpacity

onPress={this._changeHidden}>

<View style={styles.Box}>

<Text>StatusBar hidden change</Text>

</View>

</TouchableOpacity>

<View style={styles.Box}>

<Text>내용</Text>

</View>

<View style={styles.Box}>

<Text>내용</Text>

</View>

</ScrollView>

)

}

}

const styles = StyleSheet.create({

Contents : {

flex : 1,

padding:10

},

Box : {

margin: 10,

padding: 10,

borderWidth: 1,

}

})