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

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 选项卡时，它将打开您的 todo 屏幕，因为默认情况下会加载第一个屏幕。要导航到 AppointmentsScreen，您需要调用 this.props.navigation.navigate('Appointments')，它将转换到该屏幕。你仍然会在 Todos 选项卡中（它将处于活动状态）。如果您愿意，可以隐藏选项卡并做很多不同的事情，请查看文档。

您可以了解更多关于嵌套导航器here