反应导航无法显示在 StackNavigator 中添加的屏幕

Question

这里是 React-Native 初学者。我正在尝试使用 Typescript 在 React-Native 中使 StackNavigation 与 TabNavigation 一起工作。我的应用程序中有三个屏幕。 FirstScreen 和 SecondScreen 显示为选项卡，而 PopScreen 在单击 FirstScreen 中的 "Click Here" 按钮时显示。 this.props.navigation.navigate("Pop") 按钮点击调用似乎没有任何错误地失败了，但是它 returns 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 class 中不是 null 或未定义，但不知何故它无法识别 StackNavigator 中传递的选项。请帮助我如何使 navigate 方法在 TabNavigator 的任何子屏幕中工作？

Answer 1

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

第一个解决方案与 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").

在我的原始代码中，我将所有屏幕写在单独的文件中，并且我想在其自己的 class 定义中保留 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的直接child，所以navigationobject也传给了它，但是现在我们有在 TabOptions 导航器中手动传递 navigation object。 screenProps 可用于将 props 从 parent 组件传递到 child。在 FirstScreen 中，使用 this.props.screenProps.navigation 进行堆栈导航，this.props.navigation 进行选项卡导航。

反应导航无法显示在 StackNavigator 中添加的屏幕

react-navigation fails to show a screen added in StackNavigator

typescript

react-native

react-navigation