TabNavigator子屏幕如何引用父StackNavigator

我正在尝试从子选项卡导航器导航到父堆栈导航器的屏幕。但是这个.props.navigation.naving只能导航到孩子的导航道具'

//stack.js
const AppNavigator = createStackNavigator(
{
    DetailPage: DetailPage, //Screen A
    MainScreen: { .        //Screen B
        screen: MainScreen,
        navigationOptions: {
            header: null
        }
    }
    {
        initialRouteName: "MainScreen"
    }
}

//MainScreen.js
<View style={{ flex: 1 }}>
    <TabScreen />
</View>
//TabScreen.js
const TabScreen = createMaterialTopTabNavigator({
    Home: { 
        screen: HomeStack 
    },
    // Videos: { screen: Videos },
    Videos: {
        screen: Videos 
    },
    Shows: {
        screen: AllShows
    },
    Live: { 
        screen: Live
    }
})'

我想从 (TabNavigator(TabScreen 的主页导航到 (StackNavigator(AppNavigator 的详细信息页面。但OnPress什么也没做。但是，它可以导航到选项卡导航器(子导航器(的不同屏幕。请帮助我如何从子选项卡导航器导航到父堆栈导航器

不，你不能做这样的事情。您需要确保只定义了一个导航器。如果没有，则需要确保导航状态已连接，以便导航器相互认识。我强烈建议您使用单根导航

参考反应导航中的常见错误

显式呈现多个导航器大多数应用程序应该只在 React 组件中渲染一个导航器，这通常位于应用程序的根组件附近。起初这有点违反直觉，但对于 React 导航的架构来说很重要。

您需要在一个地方(根(定义所有内容。喜欢下面

import React, { Component } from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import Camera from "./screens/camera";
import Welcome from "./screens/welcome";
import Scanner from "./screens/scanner";
import Cards from ".//screens/cards";
const BottomNavigation = createMaterialBottomTabNavigator(
  {
    Scan: { screen: Scanner },
    Cards: { screen: Cards },
    Settings: { screen: Cards }
  },
  {
    initialRouteName: "Scan",
    shifting: true
  }
);
const AppNavigator = createStackNavigator({
  Welcome: {
    screen: Welcome,
    navigationOptions: { header: null }
  },
  Camera: {
    screen: Camera,
    navigationOptions: { header: null }
  },
  Home: {
    screen: BottomNavigation,
    navigationOptions: { header: null }
  }
});
export default createAppContainer(AppNavigator);

现在我相信您可以导航到不同的屏幕，因为所有内容都在单个导航器上定义。

你能试试这个吗？

//stack.js
const AppNavigator = createStackNavigator(
{
    DetailPage: DetailPage, //Screen A
    MainScreen: { .        //Screen B
        screen: MainScreen,
        navigationOptions: {
            header: null
        }
    },
    TabScreen : {
       screen : TabScreen
    },
    {
        initialRouteName: "TabScreen"
    }
}


//TabScreen.js
const TabScreen = createMaterialTopTabNavigator({
    Home: { 
        screen: HomeStack 
    },
    // Videos: { screen: Videos },
    Videos: {
        screen: Videos 
    },
    Shows: {
        screen: AllShows
    },
    Live: { 
        screen: Live
    }
},
    {
        initialRouteName: "Home"
    }
)'

this.props.navigation.dangerouslyGetParent().navigate('routeName', {});

<小时 />

此外，如果您准备重构一些代码，则可以创建一个新屏幕并创建一些额外的组件，您可以为每个TabNavigation屏幕创建一个MainTabScreen，然后：-

应用.js

<NavigationContainer>
  <Stack.Navigator
    screenOptions={{
      headerShown: false
    }}
  >
    <Stack.Screen 
      name="login" 
      component={LogIn} 
      options={{title : 'LOG IN', headerShown: true}}
    />
    <Stack.Screen 
      name="client-tabs-main" 
      component={ClientTabsMain} 
    />
    ... Other Screens ...
  </Stack.Navigator>
</NavigationContainer>

ClientsTabMain.jsx

<Tabs.Navigator 
    activeColor='white'
    barStyle={{backgroundColor: colors.primary}}
    >
    <Tabs.Screen
    name="home-tabs"
    component={HomeTab}
    options={{
      tabBarLabel: 'Home',
      tabBarIcon: ({ color }) => (
        <MaterialCommunityIcons name="home-outline" color={color}  size={18} />
      ),
    }}
  />
  <Tabs.Screen
    name="portfolio-tabs"
    component={PortfolioTab}
    options={{
      tabBarLabel: 'Portfolio',
      tabBarIcon: ({ color }) => (
        <MaterialCommunityIcons name="clock" color={color}  size={18} />
      )
    }}
  />
  ... Other Screens ...
</Tabs.Navigator>

PortfolioTabs.jsx

<PortfolioStack.Navigator
  screenOptions={{
    headerShown: true
  }}
>
<PortfolioStack.Screen 
  name="portfolio" 
  component={Portfolio} 
  options={{
    title: 'Portfolio'
  }}
  />
  <PortfolioStack.Screen 
    name="transaction" 
    component={Transaction} 
  />
</PortfolioStack.Navigator>

并使用：-

this.props.navigation.replace('client-tabs-main',{
      screen: 'portfolio-tabs',
      params: {
        screen: 'portfolio'
      }
    });

createBottomTabNavigator({
    HomeTab: {
        screen: HomeStack,
            navigationOptions: {
            title: "Home",
            tabBarOnPress: this.handleTabPress
        }
    },
MessagingTab: {
        screen: MessagingStack,
        navigationOptions: {
            title: "Messaging",
            tabBarOnPress: this.handleTabPress
        }
    }
});
handleTabPress = ({ navigation }) => {
    navigation.popToTop();
    navigation.navigate(navigation.state.routeName);
}`

相关内容

最新更新

热门标签：