我使用React Navigation,我的应用程序结构如下所示
-主页(标签)
-存档
-PostDetails
-搜索(标签)
-个人资料(标签)
我想从搜索标签中获得推送详细信息屏幕,但是在搜索导航中没有“推送”功能,只有导航
因此,当使用从搜索选项卡导航到详细信息屏幕时,将进入详细信息,但是当用户进行搜索并从此处再次进入详细信息时,它将进入先前的详细信息屏幕(无法推送堆栈)。在“首页”标签屏幕中,推送详细信息正常工作
那么我如何从搜索标签(如主页标签)中推送详细信息屏幕?
从家导航到详细信息-> navigation.push('Post', {data: item})
从搜索导航到详细信息-> navigation.navigate('Post', {data: item})
我的代码(app.js):
const Tabs = createBottomTabNavigator();
const HomeStack = createStackNavigator();
const HomeStackScreen = () => (
<HomeStack.Navigator screenOptions={{headerShown: false}}>
<HomeStack.Screen name="Home" component={HomeScreen} />
<HomeStack.Screen name="Archive" component={ArchiveScreen} />
<HomeStack.Screen name="Post" component={PostScreen} />
</HomeStack.Navigator>
);
const MainTabs = () => (
<Tabs.Navigator tabBar={(props) => <MyTabBar {...props} />}>
<Tabs.Screen
name="Home"
options={{tabBarLabel: 'home', tabBarIcon: 'home'}}
component={HomeStackScreen}
/>
<Tabs.Screen
name="Search"
options={{tabBarLabel: 'search', tabBarIcon: 'search'}}
component={SearchScreen}
/>
<Tabs.Screen
name="Profile"
options={{
tabBarLabel: 'profile',
tabBarIcon: 'profile',
cardStyle: {backgroundColor: '#121212'},
}}
component={ProfileScreen}
/>
</Tabs.Navigator>
);
const Drawer = createDrawerNavigator();
export default () => {
const { t } = useTranslation();
const dir = t('dir');
const lang = t('lang');
return (
<PlayerProvider>
<MenuProvider>
<StatusBar
barStyle="light-content"
backgroundColor="#0000001a"
translucent={true}
/>
<NavigationContainer theme={MyTheme}>
<Drawer.Navigator drawerContent={(props) => <MenuScreen {...props} />} drawerPosition={dir == 'ltr' ? 'left' : 'right'}>
<Drawer.Screen name="Home" component={MainTabs} />
</Drawer.Navigator>
</NavigationContainer>
</MenuProvider>
</PlayerProvider>
)
};