以下是我的应用程序导航器的层次结构
├── 应用导航器 ( 底部选项卡导航器(
-
├── 饲料(堆栈导航器(
- 帖子详细信息屏幕
- 页面详细信息屏幕
- 配置文件详细信息屏幕
- 。其他屏幕
-
├── 通知(堆栈导航器(
- 配置文件详细信息屏幕
- 页面详细信息屏幕
- 帖子详细信息屏幕
- 。其他屏幕
-
├── 配置文件 (堆栈导航器(
- 配置文件详细信息屏幕
- 页面详细信息屏幕
- 帖子详细信息屏幕
- 。其他屏幕
现在的问题是我必须复制所有堆栈中通用的屏幕(ProfileDetail,PostDetail和PageDetail(,以便可以在堆栈中访问它们。
对于此用例,是否有更好的解决方案。我应该把公共屏幕放在哪里,以便它们在所有子堆栈中都可用,而我不必到处复制它们。
这是一个我经历过但找不到好解决方案的未解决的 github 问题 伊苏埃
由于您有多个共同的屏幕和一些不同的数据(标题、描述等(,因此您只能创建一个具有多个屏幕的通用堆栈导航器,然后您可以从其他任何地方调用它。
您的堆栈导航器可以是这样的:
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
访问密钥即可。
如果堆栈上有更多屏幕,则可以在数组中传递组件的信息。
重复确实是我们必须避免的不良做法。 我不知道您是否曾经想过创建一个只有"公共"屏幕定位的整个堆栈,或者只是将堆栈和屏幕周围到另一个父堆栈中。它就像一个文件夹结构,请参考下面的代码:
像这样:
<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>
然后从一个堆栈导航到另一个堆栈,假设您在 FeedStack 下,大概在 Feed1Screen 中,并且想要在位于 NotificationStack 下的 Notification1Screen 中,请使用:
navigationRef.navigate('NotificationStack', {
screen: 'Notification1Screen', // whatever screenName under NotificationStack goes here
params: {
// ...whatever parameter passed to "Notification1Screen" goes here.
}
});
希望这可能会有所帮助:>
首先在项目结构中创建一个目录来存储共享屏幕。例如,您可以在项目的根目录中创建一个名为 screens 的目录。
在 screens 目录中,根据应用程序的逻辑部分创建子目录。例如:
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.