ReactNative从按钮单击导航到其他屏幕，而其他路径未在选项卡式导航中定义

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 组件屏幕，我有另一个组件约会，我想转换到该组件。我怎样才能做到这一点？好像我在TabNavigator()中包含了它的路线，这将开始在我的导航中显示其他标签（我不想显示）。

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

在网络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')，它将转换到该屏幕。你仍然会在Todos标签中（它将处于活动状态）。如果您想要隐藏标签并做一堆不同的事情，请查看文档。

您可以详细了解嵌套导航器here