В этом приложении я использую навигаторы, предоставленные react-navigation
со следующей иерархией.
BottomTabNavigator
|
+ StackNavigator
|
+ MaterialTopTabNavigator (PageTopTabNav)
| |
| + StackNavigator (StackNavA)
| |
| + StackNavigator
| |
| + StackNavigator
|
+ StackNavigator
На приведенном ниже снимке экрана область, выделенная красным, не настраивается, единственный способ избавитьсяэто установить header: null
в моем StackNavigator
.
const StackNavA = createStackNavigator({
LandingA: { screen: ScreenLandingA },
Details: { screen: ScreenDetails }
}, {
defaultNavigationOptions: {
header: null
}
});
Однако я хочу показать панель навигации, чтобы удерживать кнопку «Назад» на месте, чтобы пользователи могли вернуться на предыдущую страницу..
Этот StackNavA
экспортируется следующим образом.
export default class ScreenA extends React.Component {
static router = StackNavA.router;
render() {
return (
<StackNavA navigation={this.props.navigation} />
);
}
}
Он используется MaterialTopTabNavigator
из другого файла.
const PageTopTabNav = createMaterialTopTabNavigator({
A: { screen: ScreenA },
B: { screen: ScreenB },
C: { screen: ScreenC }
}, {
initialRouteName: "A",
tabBarOptions: {
activeTintColor: "white",
inactiveTintColor: "#CCCCCC",
labelStyle: {
fontSize: 16,
fontWeight: "bold"
},
indicatorStyle: {
height: 0
},
style: {
backgroundColor: "teal",
borderBottomWidth: 0.5,
borderBottomColor: "gray"
}
},
backBehavior: "none"
});
PageTopTabNav
экспортируется в оболочке компонента SafeAreaView
, чтобы предотвратить наложение строки состояния на устройствах iOS .
export default class BrowseScreen extends React.Component {
static router = PageTopTabNav.router;
render() {
return (
<SafeAreaView style={{ flex: 1, backgroundColor: "teal" }}>
<PageTopTabNav navigation={this.props.navigation} />
</SafeAreaView>
);
}
}
Можно ли избавиться от области, выделенной красным, при сохранениипанель навигации в StackNavA
?