React Native-从其他选项卡推送堆栈屏幕

时间:2020-10-09 08:32:02

标签: react-native react-navigation

我使用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>
  )
};

0 个答案:

没有答案