以下是我的应用程序导航器的层次结构
├── appNavigator(底部选项卡导航器)
-
├── feed(堆栈导航器)
- 后详细信息屏幕
- 页面详细信息屏幕
- 个人资料详情屏幕
- ...其他屏幕
-
├── 通知(堆栈导航器)
- 个人资料详情屏幕
- 页面详细信息屏幕
- 发布详情屏幕
- ...其他屏幕
-
├── 个人资料(堆栈导航器)
- 个人资料详情屏幕
- 页面详细信息屏幕
- 发布详情屏幕
- ...其他屏幕
现在的问题是我必须复制所有堆栈中常见的屏幕(ProfileDetail、PostDetail 和 PageDetail),以便可以在堆栈中访问它们。
对于这个用例有更好的解决方案吗?我应该将公共屏幕放在哪里,以便它们在所有子堆栈中都可用,并且我不必在各处复制它们。
这是一个开放的 github 问题,我经历过但找不到好的解决方案Isuue https://github.com/react-navigation/react-navigation/issues/6434#issuecomment-551995350
由于您有多个公共屏幕和一些不同的数据(标题、描述等),因此您只能创建一个具有多个屏幕的公共堆栈导航器,然后您可以从其他任何地方调用它。
你的堆栈导航器可以是这样的:
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 https://reactnavigation.org/docs/params/#summary.
如果堆栈上有更多屏幕,则可以在数组中传递组件信息。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)