在哪里放置多个堆栈导航器中常见的所有屏幕？ - 反应导航 v5

Question

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

├── appNavigator（底部选项卡导航器）

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

  • 帖子详情屏幕
  • 页面详情屏幕
  • 个人资料详情屏幕
  • ...其他屏幕

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

  • 个人资料详情屏幕
  • 页面详情屏幕
  • 帖子详情屏幕
  • ...其他屏幕

• ├──个人资料（堆栈导航器）

  • 个人资料详情屏幕
  • 页面详情屏幕
  • 帖子详情屏幕
  • ...其他屏幕

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

对于这个用例有更好的解决方案吗？我应该将公共屏幕放在哪里，以便它们在所有子堆栈中都可用，并且我不必在各处复制它们。

这是一个开放的 github 问题，我经历过但找不到好的解决方案 发布

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

访问密钥，如此处所述。

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

Answer 2

重复确实是一种我们必须避免的坏习惯。 我不知道您是否考虑过创建一个仅“公共”屏幕所在的整个堆栈，或者只是将堆栈和屏幕包围到另一个父堆栈中。就像一个文件夹结构，参考下面的代码：

类似：

<Stack.Navigator>
  <Stack.Screen name={'FeedStack'} component={FeedStack} />
  <Stack.Screen>...NotificationStack (same above)
  <Stack.Screen>...ProfileStack (same above)
  <Stack.Screen>...CommonStack (same above)
  ...or here
</Stack.Navigator>

// inside every child stack, define a Stack and pass all relevant screens to the stack, for example the FeedStack: 

    <Stack.Navigator>    
       <Stack.Screen name={'Feed1Screen'} component={Feed1Screen} />
       <Stack.Screen name={'Feed2Screen'} component={Feed2Screen} />
    </Stack.Navigator>

然后要从一个 Stack 导航到另一个 Stack，假设您位于 FeedStack 下，大概在 Feed1Screen 中，并且想要位于位于 NotificationStack 下的 Notification1Screen 中，请使用：

navigationRef.navigate('NotificationStack', {
        screen: 'Notification1Screen', // whatever screenName under NotificationStack goes here
        params: {
           // ...whatever parameter passed to "Notification1Screen" goes here.
        }
});

希望能有所帮助：>

Answer 3

首先在项目结构中创建一个目录来存储共享屏幕。例如，您可以在项目的根目录下创建一个名为 screen 的目录。

在 screen 目录中，根据应用程序的逻辑部分创建子目录。例如：

screens/
├── Auth/
│   ├── LoginScreen.js
│   ├── SignupScreen.js
│   └── ...
├── Dashboard/
│   ├── HomeScreen.js
│   ├── ProfileScreen.js
│   └── ...
└── ...

Define Common Components ------>>> 
If your shared screens have components that are used across multiple screens, consider creating a components directory within each screen's directory or in the main components directory. This helps keep the components closely related to the screens they're used in.

Import and Use Shared Screens ------->>
In your different stack navigators, you can then import the shared screens from the organized directory structure and use them as needed

import { LoginScreen, SignupScreen } from '../screens/Auth';

const AuthStack = createStackNavigator();

function AuthNavigator() {
  return (
    <AuthStack.Navigator>
      <AuthStack.Screen name="Login" component={LoginScreen} />
      <AuthStack.Screen name="Signup" component={SignupScreen} />
    </AuthStack.Navigator>
  );
}

Navigation Hierarchies ---->>
Depending on your app's structure, you might have different navigators, such as AppNavigator, AuthNavigator, MainNavigator, etc. Each of these navigators can import and include the appropriate shared screens.