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

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

Answer 4

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

TabNavigator子屏幕如何引用父StackNavigator？

4 个答案: