Я пытаюсь сделать приложение на своем родном языке, которое имеет экран навигации по вкладкам в качестве основного экрана и кнопку, которая переходит на другой экран.У меня проблема с тем, чтобы все выглядело корректно с помощью строки состояния.
У меня в качестве навигатора есть это:
const tabConfiguration = {
DecksList: {
screen: DecksList,
navigationOptions: {
title: 'Deck List'
}
},
NewDeck: {
screen: NewDeck,
navigationOptions: {
title: 'New Deck'
}
},
};
const TabNavigator =
Platform.select({
ios: createBottomTabNavigator(tabConfiguration),
android: createMaterialTopTabNavigator(tabConfiguration)
});
const StackNavigator = createStackNavigator({
Main: {
screen: TabNavigator,
navigationOptions: {
header: null
}
},
Deck: {
screen: Deck,
navigationOptions: {
title: 'Deck'
}
}
});
export default createAppContainer(StackNavigator);
И мой App.js
такой:
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<StatusBarView backgroundColor={'red'}
barStyle="light-content"/>
<AppNavigator/>
</View>
);
}
}
StatusBarView
- это:
const StatusBarView = props => {
const {backgroundColor} = props;
return (
<View style={{backgroundColor, height: Constants.statusBarHeight}}>
<StatusBar translucent backgroundColor={backgroundColor} {...props} />
</View>
);
};
С таким кодом мой экран вкладки выглядит так: А другой мой экран заканчивается так: Этот второй экран имеет заголовок выше, чем следовало бы из-за StatusBarView
.Если я удаляю его, второй экран выглядит нормально: Но экран вкладок идет за строкой состояния: Кто-нибудь знает, как можно с этим справиться?Мне нужна строка состояния для одного экрана (одна вкладка) и не может быть для другого экрана (одна без вкладок).
Я сделал перекус здесь: https://snack.expo.io/@esscheffer/flashcards-start