在哪里放置多个堆栈导航器中常见的所有屏幕?-Reaction导航v5 [英] Where to put all the screens which are common in multiple stack navigators? - React Navigation v5
本文介绍了在哪里放置多个堆栈导航器中常见的所有屏幕?-Reaction导航v5的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
以下是我的应用程序导航器的层次结构
├──应用程序导航器(底部选项卡导航器)
├──提要(堆栈导航器)
- PostDetailScreen
- pageDetailScreen
- ProfileDetailScreen
- ...其他屏幕
├──通知(堆栈导航器)
- ProfileDetailScreen
- PageDetailScreen
- PostDetailScreen
- ...其他屏幕
├──配置文件(堆栈导航器)
- ProfileDetailScreen
- PageDetailScreen
- PostDetailScreen
- ...其他屏幕
现在的问题是,我必须复制所有堆栈中通用的屏幕(ProfileDetail、PostDetail和PageDetail),以便在堆栈中可以访问它们。
对于这个用例有没有更好的解决方案。我应该将公共屏幕放在哪里,以便它们在所有子堆栈中都可用,而不必到处复制它们。
以下是一个尚未解决的GitHub问题,我查看了该问题,但找不到好的解决方案 Isuue推荐答案
因为您有共同的多个屏幕和一些不同的数据(标题、描述等),所以您只能创建一个具有多个屏幕的公共堆栈导航器,然后您可以从其他任何地方调用它。
堆栈导航器可以是这样的:
export default class StackNavigator extends React.Component {
render() {
const { stackName1, stackComponent1, stackName2, stackComponent2, stackName3, stackComponent3 } = this.props;
// console.log("props");
// console.log(stackName1);
// console.log(stackComponent1);
return (
<Stack.Navigator initialRouteName={stackName1}>
<Stack.Screen
name={stackName1}
component={stackComponent1}
initialParams={{key: "value"}}
/>
<Stack.Screen
name={stackName2}
component={stackComponent2}
initialParams={{key: "value"}}
/>
<Stack.Screen
name={stackName3}
component={stackComponent3}
initialParams={{key: "value"}}
/>
</Stack.Navigator>
)
}
}
然后像这样从任何屏幕(摘要、通知、个人资料)调用导航器:
<StackNavigator stackName1="PostDetailScreen" stackComponent1={PostDetailScreen} stackName2="PageDetailScreen" stackComponent2={PageDetailScreen} stackName3="ProfileDetailScreen" stackComponent3={ProfileDetailScreen}/>
此外,如果您想从堆栈导航器向每个页面发送额外的参数,您可以通过initialParams={{key: "value"}}
发送这些参数,我已经将这些参数添加到堆栈导航器的每个屏幕中。如果您想从特定屏幕接收此道具,只需通过this.props.route.params.key
访问密钥即可,如here所述。
如果堆栈上有更多屏幕,则可以在数组中传递组件信息。
这篇关于在哪里放置多个堆栈导航器中常见的所有屏幕?-Reaction导航v5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文