TabNavigator 子屏幕如何引用父 StackNavigator？

Question

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

//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 的 DetailPage。但是 OnPress 什么都不做。但是，它可以导航到 TabNavigator（子导航器）的不同屏幕。 请帮助我如何从子 TabNavigator 导航到父 StackNavigator

Answer 1

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

参考Common Mistakes in react navigation

显式渲染多个导航器 大多数应用程序应该只在 React 组件内渲染一个导航器，这通常位于应用程序根组件附近的某个地方。一开始这有点违反直觉，但它对 React Navigation 的架构很重要。

您需要在一个地方（根目录）定义所有内容。如下所示

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);

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

Answer 2

你能试试这个吗？

//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"
    }
)'

Answer 3

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

---

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

App.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'
      }
    });

Answer 4

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);
}`