如何在 React Native 中从 DRAWER NAVIGATION 导航到 BOTTOM TAB BAR NAVIGATION?

IT技术 reactjs react-native
2021-04-29 03:27:13

这个网址:https : //streamable.com/no6anz是一个展示我的应用程序导航的视频,我希望能够在我的选项卡导航中从抽屉屏幕导航到特定的选项卡屏幕。

例如:如果我按我们说的“消息”抽屉项目,我想浏览到我的帐户 标签 屏幕标签导航

到目前为止,我的实现并不是最好的:

import React, {Fragment, Component} from 'react';
import {View, StyleSheet} from 'react-native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createDrawerNavigator} from '@react-navigation/drawer';
import {createStackNavigator} from '@react-navigation/stack';

import Home from '../Views/HomeView';
import Cart from '../Views/CartView';
import MyAccount from '../Views/MyAccountView';
import Sidebar from '../Views/Sidebar';

import HomeIconColor from './CustomSVGIcons/HomeIconColor';
import CartIconColor from './CustomSVGIcons/CartIconColor';
import PersonIconColor from './CustomSVGIcons/PersonIconColor';
import MenuIconColor from './CustomSVGIcons/MenuIconColor';

import Contact from '../Views/screens/Contact';
import Messages from '../Views/screens/Messages';
import {
  NavigationContainer,
  DrawerActions,
  useNavigation,
} from '@react-navigation/native';
import {BottomTabBar} from '@react-navigation/bottom-tabs';
import Login from '../Views/screens/Login';
import {create} from 'react-test-renderer';
import {createSwitchNavigator} from '@react-navigation/compat';

const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
const Switch = createSwitchNavigator();

class Navigator extends Component {
  constructor() {
    super();
    this.state = {};
  }
  render() {
    return (
      <NavigationContainer>
        <MyDrawerNavigation />
      </NavigationContainer>
    );
  }
}
const MyTabs = (props) => {
  const navigation = useNavigation();
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarButton: ['Contact', 'Route2ToExclude'].includes(route.name)
          ? () => {
              return null;
            }
          : undefined,
      })}>
      <Tab.Screen
        name="Home"
        component={Home}
      />
      <Tab.Screen
        name="MyAccount"
        component={MyAccount}
      />
      <Tab.Screen
        name="Cart"
        component={Cart}
      />
      <Tab.Screen
        name="Sidebar"
        component={Sidebar}
      />
      <Tab.Screen name="Contact" component={Contact} />
    </Tab.Navigator>
  );
};
const MyDrawerNavigation = () => {
  return (
    <Drawer.Navigator drawerPosition={'right'}>
      <Drawer.Screen
        name="Home"
        component={MyTabs}
        initialParams={{screen: 'Home'}}
      />
      <Drawer.Screen
        name="My Account"
        component={MyTabs}
        initialParams={{screen: 'MyAccount'}}
      />
    </Drawer.Navigator>
  );
};    
const styles = StyleSheet.create({
      tabNav: {
        backgroundColor: '#000000',
      },
    });

export default Navigator;
2个回答

解决了!:

经过广泛深入的研究;我使用 onPress 处理程序创建了自己的自定义抽屉。

onPress 处理程序启动导航到指定屏幕的操作。

注意:您必须将导航引用传递给顶级导航容器。您还必须将此相同的引用传递到您的自定义抽屉module(或该问题中的任何module)

这是我的自定义抽屉组件:

import React, {Component} from 'react';
import {Text, View, Button, StyleSheet} from 'react-native';

import {useNavigation, CommonActions} from '@react-navigation/native';
import * as rootNavigator from '../components/rootNavigator';

const CustomDrawer = () => {
  return (
    <View style={styles.container}>
      <Button
        title="My Account"
        onPress={() => rootNavigator.navigate('MyAccount')}
      />
      <Button
        title="Contact"
        onPress={() => rootNavigator.navigate('Contact')}
      />
      <Button title="Cart" onPress={() => rootNavigator.navigate('Cart')} />
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 30,
  },
});
export default CustomDrawer;

这是我返回 DrawerNavBar 的代码:

const MyDrawerNavigation = () => {
  return (
    <NavigationContainer ref={navigationRef}>
      <Drawer.Navigator
        drawerPosition={'right'}
        drawerContent={(props) => <CustomDrawer {...props} />}>
        <Drawer.Screen name="Tabs" component={MyTabs} />
        <Drawer.Screen name="Contact" component={Contact} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

您可以将屏幕作为初始参数传递,它会重定向到正确的选项卡。

  <Drawer.Screen name="MyTabs" component={'Tab Component Name'} initialParams={{screen:'MyAccount'}}/>