problem: < StatusBar / > component is invalid. There is no
description of the reaction at all: the
project is initialized with expo.
add: use the Expo.Constants.statusBarHeight method to get the height of the status bar, and then add an empty View to simulate a status bar
but still don"t know: < StatusBar / > why the component is invalid
previous simplest test demo
import React from "react";
import {
StyleSheet,
View,
Text,
StatusBar
} from "react-native";
import { Constants } from "expo";
export default class StatusBarDemo extends React.Component {
render() {
return (
<View style={styles.container}>
{/* <View style={styles.statusBar} /> */}
<StatusBar
backgroundColor="blue"
barStyle="light-content"
/>
<View style={styles.content}>
<Text>this is a test</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
statusBar: {
backgroundColor: "-sharpC2185B",
height: Constants.statusBarHeight,
color: "red"
},
container: {
flex: 1,
},
content: {
flex: 1,
backgroundColor: "red"
}
});