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

Question

React Native初学者。我正在尝试让StackNavigation在React Native with Typescript中与TabNavigation一起工作。我的应用程序中有三个屏幕。FirstScreen和SecondScreen显示为选项卡，单击FirstScreen中的"单击此处"按钮时显示为PopScreen。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是使用它的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可用于将道具从父组件传递到子组件。在FirstScreen中，this.props.screenProps.navigation用于堆栈导航，this.props.navigation用于选项卡导航。