在哪里放置所有在多个堆栈导航器中通用的屏幕？ -React Navigation v5

Question

以下是我的应用导航器的层次结构

├──appNavigator（底部标签导航器）

• ├──feed（堆栈导航器）

  • postDetailScreen
  • pageDetailScreen
  • ProfileDetailScreen
  • ...其他屏幕

• ├──通知（堆栈导航器）

  • ProfileDetailScreen
  • PageDetailScreen
  • PostDetailScreen
  • ...其他屏幕

• ├──配置文件（Stack Navigator）

  • ProfileDetailScreen
  • PageDetailScreen
  • PostDetailScreen
  • ...其他屏幕

现在的问题是，我必须复制所有堆栈中共有的屏幕（ProfileDetail，PostDetail和PageDetail），以便它们可以在堆栈中访问。

针对此用例是否有更好的解决方案。我应该将通用屏幕放在哪里，以便所有子堆栈中都可以使用它们，而不必到处复制它们。

这是我遇到的一个开放的github问题，但找不到一个好的解决方案 Isuue

Answer 1

由于共有多个屏幕，并且有一些不同的数据（标题，描述等），因此您只能创建一个具有多个屏幕的通用堆栈导航器，然后可以从其他任何地方调用它。

您的堆栈导航器可以是这样的：

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。

如果堆栈上有更多屏幕，则可以在数组中传递组件的信息。