单击按钮将本机导航反应到其他屏幕，而其他路线未在选项卡式导航中定义

Question

我正在使用 react-navigation 模块并定义了以下屏幕路由：

import React, {Component} from 'react';
import { AppRegistry } from 'react-native';
import { TabNavigator } from 'react-navigation';

import HomeScreen from './src/ScreenDashboard';
import TodosScreen from './src/ScreenTodos';
import ContactsScreen from './src/ScreenContacts';

                            // Defining navigation (using tabbed navigation style)
const AppWithNavigation = TabNavigator(    
{                                         
    Home: { screen: HomeScreen },
    Todos: { screen: TodosScreen },
    Contacts: { screen: ContactsScreen }
},
{
 ...
}

如果我尝试将过渡添加到任何其他屏幕，我必须通过以下方式进行：

const { navigate } = this.props.navigation;   // child component reading navigation from its props
<Button onPress={ () => navigate('Todos') } />

但问题是，我不想转换到我的 Todos 组件屏幕，我有另一个组件 Appointments，我想要过渡到该组件。我怎样才能做到这一点？就好像我在 TabNavigator() 中包含它的路线一样，它将开始在我的导航中显示其他选项卡（我不想显示）。

当我想通过单击 添加、编辑、搜索 按钮进行屏幕导航时，同样的逻辑适用。那些不能在导航路线中定义（以便使它们在主导航中可见）。我希望你理解我的问题。

在 web ReactJS 中，我们简单地定义路由，这很好，但不知道如何在这里管理这些东西。

基本上我想在单击主屏幕上的任何条带时切换屏幕。

Answer 1

您可以将导航器嵌套在其他导航器中。在您的情况下，您可以在 TabNaivgator 中插入 StackNavigator

const TodoNavigator = StackNavigator({
    Todos: { screen: TodosScreen },
    Appointments: { screen: AppointmentsScreen},
    // other screens
})

const AppWithNavigation = TabNavigator(    
{                                         
    Home: { screen: HomeScreen },
    TodosTab: TodoNavigator,
    Contacts: { screen: ContactsScreen }
}

现在，当您按 Todo 选项卡时，它会打开您的待办事项屏幕，因为默认情况下会加载第一个屏幕。要导航到 AppointmentsScreen，您需要调用 this.props.navigation.navigate('Appointments')，它将转换到该屏幕。你仍然会在待办事项选项卡中（它将处于活动状态）。如果你想隐藏选项卡并做很多不同的事情，请查看文档。

您可以了解有关嵌套导航器的更多信息here

单击按钮将本机导航反应到其他屏幕，而其他路线未在选项卡式导航中定义

ReactNative Navigation to other screen from a button click, while other route is not defined in Tabbed navigation

reactjs

react-router

react-native

react-navigation