react-navigation 无法显示在 StackNavigator 中添加的屏幕

Question

这里是 React-Native 初学者。我正在尝试使 StackNavigation 与带有 Typescript 的 React-Native 中的 TabNavigation 一起工作。我的应用程序中有三个屏幕。 FirstScreen 和SecondScreen 显示为选项卡，而PopScreen 则在单击FirstScreen 中的“单击此处”按钮时显示。 this.props.navigation.navigate("Pop") 按钮单击调用似乎没有任何错误，但它返回 false。

这是我的代码：

import React from "react";
import { View, Text, Button } from "react-native";
import { StackNavigator } from 'react-navigation';
import { TabNavigator, NavigationStackScreenOptions } from 'react-navigation';

class FirstScreen extends React.Component<any, any> {
    render() {
        return (
            <View>
                <Text>My First Tab Screen!!!</Text>
                <Button 
                    title="Click Here"
                    onPress={ () => this.props.navigation.navigate("Pop"); } />
            </View>
        );
    }
}

class SecondScreen extends React.Component<any, any> {
    render() {
        return (
            <Text>My Second Tab Screen</Text>
        );
    }
}

class PopScreen extends React.Component<any, any> {
    render() {
        return (
            <View>
                <Text>Content in pop up.</Text>
            </View>
        );
    }
}

const TabOptions = TabNavigator({
    MyFirst: { screen : FirstScreen },
    MySecond: { screen : SecondScreen }
});

class TabOptionsScreen extends React.Component<any, any>
{
    static navigationOptions : NavigationStackScreenOptions = {
        header: null
    };

    render() {
        return ( <TabOptions /> )
    }
}

export const App = StackNavigator ({
   Home : {  screen: TabOptionsScreen },
   Pop: { screen: PopScreen }
})

this.props.navigation 对象在 FirstScreen 类中不是 null 或未定义，但不知何故它无法识别在 StackNavigator 中传递的选项。请帮助我如何使navigate 方法在 TabNavigator 的任何子屏幕中工作？

Answer 1

经过几次阅读后，我意识到this.props.navigator 是其所使用的导航器所独有的。 TabNavigator 中的navigator 可用于在选项卡之间切换，StackNavigator 中的navigator 可以将屏幕推入或从屏幕堆栈中弹出。导航器中的屏幕确实从父级继承navigator 对象，但它们不会在屏幕层次结构中向下传递。所以有两种解决方案：

第一个解决方案与 Guilherme 建议的几乎相同，但我没有在 TabNavigator 中传递 navigationOptions，而是在 StackNavigator 中传递了相关屏幕。

const TabOptions = TabNavigator({
    MyFirst: { screen : FirstScreen },
    MySecond: { screen : SecondScreen }
});
// TabOptionsScreen class removed here. 
// TabOptions constant is directly passed in StackNavigator.
export const App = StackNavigator ({
    Home : {  
       screen: TabOptions,
       navigationOptions : {
            header: null
        }
    },
    Pop: { screen: PopScreen }
})

现在我可以在 FirstScreen 组件中使用this.props.navigation.navigate("Pop")。它还允许我们导航到同一级别的其他可用选项卡 - this.props.navigation.navigate("MySecond")。

在我的原始代码中，我将所有屏幕都写在单独的文件中，并且我想将屏幕的navigationOptions 保留在它自己的类定义中。所以第二种解决方案是关于这种模块化方法。

export class FirstScreen extends React.Component<any, any> {
    render() {
        const { navigate } = this.props.screenProps.navigation;
        return (
            <View>
                <Text>My First Tab Screen!!!</Text>
                <Button 
                    title="Click Here !!!"
                    onPress={ () => navigate("Pop") }/>
            </View>
        );
    }
}

const TabOptions = TabNavigator({
    MyFirst: { screen : FirstScreen },
    MySecond: { screen : SecondScreen }
});

export class TabOptionsScreen extends React.Component<any, any>
{
    static navigationOptions : NavigationStackScreenOptions = {
        header: null,
    };

    render() {
        return ( <TabOptions screenProps={{ navigation: this.props.navigation }} /> )
    }
}

export const App = StackNavigator ({
   Home : {  screen: TabOptionsScreen },
   Pop: { screen: PopScreen }
})

在这段代码中，TabOptionsScreen 是StackNavigator 的直接子代，所以navigation 对象也被传递给它，但现在我们必须在TabOptions 导航器中手动传递navigation 对象。 screenProps 可用于将 props 从父组件传递给子组件。在FirstScreen 中，使用this.props.screenProps.navigation 进行堆栈导航，使用this.props.navigation 进行选项卡导航。