reactjs - 将多个堆栈导航器中常见的所有屏幕放在哪里？ - react 导航 v5

Question

以下是我的应用导航器的层次结构
├── appNavigator(底部标签导航器)

├── 饲料(堆栈导航器)

postDetailScreen

pageDetailScreen

ProfileDetailScreen

...其他屏幕

├── 通知(堆栈导航器)

ProfileDetailScreen

PageDetailScreen

PostDetailScreen

...其他屏幕

├── 个人资料(堆栈导航器)

ProfileDetailScreen

PageDetailScreen

PostDetailScreen

...其他屏幕

现在的问题是我必须复制所有堆栈中常见的屏幕(ProfileDetail、PostDetail 和 PageDetail)，以便在堆栈中可以访问它们。
这个用例有没有更好的解决方案。我应该将公共(public)屏​​幕放在哪里，以便它们在所有子堆栈中都可用，并且我不必在任何地方复制它们。
这是我经历的一个开放的 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"}} 发送这些参数。我已将其添加到堆栈导航器的每个屏幕中。如果您想从特定屏幕接收此 Prop ，只需通过 this.props.route.params.key 访问 key 描述 here .
如果堆栈上有更多屏幕，则可以在数组中传递组件的信息。