react导航无法显示添加在StackNavigator中的屏幕
反应-本地初学者在这里。我试图让StackNavigation在React中与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类中不是空的或未定义的，但不知何故它不识别StackNavigator中传递的选项。请帮助我如何使navigate方法在TabNavigator的任何子屏幕中工作？
回答 1
Stack Overflow用户
发布于 2017-10-12 08:30:21
读了几遍之后，我才意识到this.props.navigator是唯一使用它的导航器。navigator in TabNavigator可用于在选项卡之间切换，而navigator在StackNavigator中可以将屏幕推入或从屏幕堆栈中弹出。导航器中的屏幕确实从父节点继承navigator对象，但它们并不是在屏幕层次结构中传递的。因此有两种解决方案：
第一个解决方案与Guilherme建议的几乎相同，但我没有在TabNavigator中传递TabNavigator，而是在带有关联屏幕的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 }
})现在我可以在this.props.navigation.navigate("Pop")组件中使用FirstScreen了。它还允许我们导航到相同级别上可用的其他选项卡-- 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。
https://stackoverflow.com/questions/46670201
复制相似问题
腾讯云开发者
