react-native - 如何一起使用“createStackNavigator”和“createMaterialTopTabNavigator”?
问题描述
在我的本机应用程序中,我使用的是“createStackNavigator”,但是当我结合“createMaterialTopTabNavigator”时,它会出现错误。我如何同时使用两个导航?我尝试了aolot,但无法解决此问题。在我的代码中,我使用 createStackNavigator 两次,一次用于家庭,另一次用于 tabScreen,当我单独使用它时,它都可以正常工作,但无法组合。
主.js
const Home = createStackNavigator(
{
Profile: Profile,
Feed: Feed,
Chemein: Chemein,
Graph: Graph,
},
{
initialRouteName: 'Profile',
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#744DD2',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
},
},
);
const TabScreen = createMaterialTopTabNavigator(
{
Clubs: { screen: Clubs },
Members: { screen: Members },
},
{
tabBarPosition: 'top',
swipeEnabled: true,
tabBarOptions: {
activeTintColor: '#ffff',
inactiveTintColor: '#ccc',
style: {
backgroundColor: '#744DD2',
},
},
}
);
const TopTab = createStackNavigator({
TabScreen: {
screen: TabScreen,
navigationOptions: {
headerStyle: {
backgroundColor: '#744DD2',
},
headerTintColor: '#FFFFFF',
title: 'Clubs',
},
},
});
const container = createAppContainer(Home);
// const container = createAppContainer(TabScreen );
export default container;
解决方案
我做过这样的事情:
const TabNavigator = createBottomTabNavigator(
{
Home: AppStack,
Notification: Notifications,
Account: SettingsScreen,
},
{
defaultNavigationOptions: ({navigation}) => ({
tabBarIcon: ({focused, tintColor}) =>
getTabBarIcon(navigation, focused, tintColor),
}),
tabBarOptions: {
activeTintColor: colors.tealC,
inactiveTintColor: 'gray',
},
},
);
我appstack
是我的堆栈导航器,代码如下:
const AppStack = createStackNavigator(
{
HomeScreen: {
screen: Home,
},
AirportMeeting: {
screen: AirportMeeting,
},
MeetingPoint: {
screen: MeetingPoint,
},
DriverDetails: {
screen: DriverDetails,
},
SightSeeing: {
screen: SightSeeing,
},
HotelDetails: {
screen: HotelDetails,
},
FlightDetails: {
screen: FlightDetails,
},
AddSight: {
screen: AddSight,
},
SightSeeingPurchase: {
screen: SightSeeingPurchase,
},
AddMeals: {
screen: AddMeals,
},
HomeCard: {
screen: HomeCard,
},
Trips: {
screen: Trips,
},
FAQ: {
screen: FAQ,
},
Support: {
screen: Support,
},
BeforeTravel: {
screen: BeforeTravel,
},
Weather: {
screen: Weather,
},
},
{
defaultNavigationOptions: {
headerShown: false,
},
initialRouteName: 'HomeCard',
transitionConfig: () => fromRight(),
},
);
所以基本上在我的 tabnavigator 的家庭路线中,我使用了 Appstack,它是一个堆栈导航器。
万一你好奇,我 alos 做了一个 switchnavigator,我也添加了选项卡导航器和其他堆栈导航器,所以一切皆有可能:
const navigation = createAppContainer(
createSwitchNavigator(
{
App: TabNavigator,
Auth: AuthStack,
SplashScreen: SplashScreen,
},
{
initialRouteName: 'SplashScreen',
},
),
);
推荐阅读
- powershell - 写入文件时PowerShell错误编码
- java - 如何在Android中实现“像相机模式选项一样的慢速滚动视图”?
- angular - 为什么在检查单个复选框时检查列的所有复选框 - Angular table
- python - 从临时文件夹写入存储是否有任何时间延迟或限制?
- rxjs - 从 RxJs 中的 Observable 中提取一个值
- google-cloud-platform - Google-cloud-PubSub 是否支持 amqp 1.0 协议?
- talend - 无法动态加载上下文变量
- node.js - 在 mogodb-nodejs 驱动程序中查找同一集合中的不同文档
- python - 如何将 Json 数据存储在复杂的 Python 列表中
- c# - 使用newtonsoft json C#序列化对象的大列表