React-navigation:在切换导航器中嵌套堆栈导航器和选项卡导航器导致 2 headers
React-navigation: nesting stack navigator and tab navigator inside switch navigator results in 2 headers
我在带有 react-navigation
的 React 本机应用程序中组合使用选项卡导航器、堆栈导航器和切换导航器。请注意,我必须将选项卡导航器的每个屏幕放在其自己的堆栈导航器中,以便使用内置的 header 功能。
功能有效。但是我最终得到 Feed
和 Profile
页面的 2 headers,像这样:
我只希望每个屏幕都有自己的 header 并且评论屏幕有一个后退按钮。我知道代码不是很干净,将所有这些导航器放在彼此内部会占用大量开销。那么实现这一目标的最佳方法是什么?
App.js
const FeedScreenStack = createStackNavigator({
FeedStack: {
screen: feed,
navigationOptions: {
headerTitle: "Feed"
}
}
});
const ProfileScreenStack = createStackNavigator({
ProfileStack: {
screen: profile,
navigationOptions: {
headerTitle: "My Profile"
}
}
})
const TabStack = createBottomTabNavigator({
Feed: { screen: FeedScreenStack },
Profile: { screen: ProfileScreenStack }
});
const AppStack = createStackNavigator({
Tab: TabStack,
Comments: {
screen: comments,
navigationOptions: {
headerTitle: "Comments"
},
}
});
const MainStack = createSwitchNavigator(
{
Home: AppStack,
Auth: AuthStack
},
{
initialRouteName: 'Home'
}
);
const AppContainer = createAppContainer(MainStack);
尝试像这样修改 AppStack:
已编辑:
我忘了将它包含在导航选项中。试试。
const AppStack = createStackNavigator({
Tab: {
screen:TabStack,
navigationOptions: () => ({
headerMode: 'none',
// or this
header: null
})
},
Comments: {
screen: comments,
navigationOptions: {
headerTitle: "Comments"
},
}
},
);
您说您希望 Comments
屏幕有自己的 header(与所有其他屏幕一样)和后退按钮。 具体应该返回到什么地方?了解导航的结构将使设计更容易。
让您的 AppStack
实际上只是您的 TabStack
会更干净。在与 TabStack
相同级别的 Comments
屏幕中添加可能无助于解决您的多个 header 问题。
在这里,我将展示如何根据需要完全删除 AppStack
并将 Comments
嵌套在 Profile
或 Feed
选项卡中。
const FeedScreenStack = createStackNavigator({
FeedStack: {
screen: feed,
navigationOptions: {
headerTitle: "Feed"
}
},
// if you want Comments to go back to "Feed"
Comments: {
screen: comments,
navigationOptions: {
headerTitle: "Comments"
},
}
});
const ProfileScreenStack = createStackNavigator({
ProfileStack: {
screen: profile,
navigationOptions: {
headerTitle: "My Profile"
}
},
// if you want Comments to go back to "Profile"
Comments: {
screen: comments,
navigationOptions: {
headerTitle: "Comments"
},
}
})
const TabStack = createBottomTabNavigator({
Feed: { screen: FeedScreenStack },
Profile: { screen: ProfileScreenStack }
});
const MainStack = createSwitchNavigator(
{
Home: TabStack,
Auth: AuthStack
},
{
initialRouteName: 'Home'
}
);
const AppContainer = createAppContainer(MainStack);
但是,如果您希望 Comments
实际上位于 Profile
和 Feed
之上,您应该将其设为自己的选项卡,或者将其更改为 Modal
在顶层。让我知道这是否更符合您的需要,我可以 post 更具体!
我在带有 react-navigation
的 React 本机应用程序中组合使用选项卡导航器、堆栈导航器和切换导航器。请注意,我必须将选项卡导航器的每个屏幕放在其自己的堆栈导航器中,以便使用内置的 header 功能。
功能有效。但是我最终得到 Feed
和 Profile
页面的 2 headers,像这样:
我只希望每个屏幕都有自己的 header 并且评论屏幕有一个后退按钮。我知道代码不是很干净,将所有这些导航器放在彼此内部会占用大量开销。那么实现这一目标的最佳方法是什么?
App.js
const FeedScreenStack = createStackNavigator({
FeedStack: {
screen: feed,
navigationOptions: {
headerTitle: "Feed"
}
}
});
const ProfileScreenStack = createStackNavigator({
ProfileStack: {
screen: profile,
navigationOptions: {
headerTitle: "My Profile"
}
}
})
const TabStack = createBottomTabNavigator({
Feed: { screen: FeedScreenStack },
Profile: { screen: ProfileScreenStack }
});
const AppStack = createStackNavigator({
Tab: TabStack,
Comments: {
screen: comments,
navigationOptions: {
headerTitle: "Comments"
},
}
});
const MainStack = createSwitchNavigator(
{
Home: AppStack,
Auth: AuthStack
},
{
initialRouteName: 'Home'
}
);
const AppContainer = createAppContainer(MainStack);
尝试像这样修改 AppStack:
已编辑:
我忘了将它包含在导航选项中。试试。
const AppStack = createStackNavigator({
Tab: {
screen:TabStack,
navigationOptions: () => ({
headerMode: 'none',
// or this
header: null
})
},
Comments: {
screen: comments,
navigationOptions: {
headerTitle: "Comments"
},
}
},
);
您说您希望 Comments
屏幕有自己的 header(与所有其他屏幕一样)和后退按钮。 具体应该返回到什么地方?了解导航的结构将使设计更容易。
让您的 AppStack
实际上只是您的 TabStack
会更干净。在与 TabStack
相同级别的 Comments
屏幕中添加可能无助于解决您的多个 header 问题。
在这里,我将展示如何根据需要完全删除 AppStack
并将 Comments
嵌套在 Profile
或 Feed
选项卡中。
const FeedScreenStack = createStackNavigator({
FeedStack: {
screen: feed,
navigationOptions: {
headerTitle: "Feed"
}
},
// if you want Comments to go back to "Feed"
Comments: {
screen: comments,
navigationOptions: {
headerTitle: "Comments"
},
}
});
const ProfileScreenStack = createStackNavigator({
ProfileStack: {
screen: profile,
navigationOptions: {
headerTitle: "My Profile"
}
},
// if you want Comments to go back to "Profile"
Comments: {
screen: comments,
navigationOptions: {
headerTitle: "Comments"
},
}
})
const TabStack = createBottomTabNavigator({
Feed: { screen: FeedScreenStack },
Profile: { screen: ProfileScreenStack }
});
const MainStack = createSwitchNavigator(
{
Home: TabStack,
Auth: AuthStack
},
{
initialRouteName: 'Home'
}
);
const AppContainer = createAppContainer(MainStack);
但是,如果您希望 Comments
实际上位于 Profile
和 Feed
之上,您应该将其设为自己的选项卡,或者将其更改为 Modal
在顶层。让我知道这是否更符合您的需要,我可以 post 更具体!