Я недавно начал работать с React-Native, просто попробуйте какой-нибудь простой экран, но я столкнулся с проблемой, когда мое приложение показывалось на моем устройстве (установка APK 'app-debug.apk' на 'Redmi 5 Plus - 7.1.2 '), что пользовательский интерфейс имеет странный черный в центре между строкой состояния и содержимым.
Пожалуйста, см. Изображение: Приложение имеет странный черный в центре между строкой состояния и содержимым
import React, { Component } from 'react';
import {
View, StyleSheet, StatusBar, Text
} from 'react-native';
import Main from './src/components/Main';
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
titleText: "Bird's Nest",
bodyText: 'This is not really a bird nest.'
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.baseText}>
<Text style={styles.titleText} onPress={this.onPressTitle}>
{this.state.titleText}{'\n'}{'\n'}
</Text>
<Text numberOfLines={5}>
{this.state.bodyText}
</Text>
</Text>
{/* <Main /> */}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
baseText: {
fontFamily: 'Cochin',
},
titleText: {
fontSize: 20,
fontWeight: 'bold',
},
});
Я пытаюсь скрыть строку состояния, но странный «Черный заголовок» все еще там.Результат: Сокрытие StatusBar
`<View style={styles.container}>
<StatusBar
hidden={true}
backgroundColor="blue"
barStyle="light-content"
/>
<Text style={styles.baseText}>
<Text style={styles.titleText} onPress={this.onPressTitle}>
{this.state.titleText}{'\n'}{'\n'}
</Text>
<Text numberOfLines={5}>
{this.state.bodyText}
</Text>
</Text>
{/* <Main /> */}
</View>`