开发者问题收集

TabNavigator 子屏幕如何引用父 StackNavigator?

2019-07-24
3812

我试图从子选项卡导航器导航到父堆栈导航器的屏幕。但 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

3个回答

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

请参阅 React 导航中的常见错误

明确渲染多个导航器 大多数应用程序应该只在 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);

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

Victor
2019-07-24

你可以试试这个吗?

//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"
    }
)'
hong developer
2019-07-25
this.props.navigation.dangerouslyGetParent().navigate('routeName', {});

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


<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>
<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'
      }
    });
Kevzz8.15.17
2020-05-08