react-navigation v5 - 如何切换抽屉？

Question

我升级到了react-navigation V5，却对如何让Drawer工作感到非常困惑。我之前有一个自定义的抽屉，但现在我只是想让一个样本抽屉工作。

我试图用 this.props.navigation.dispatch(DrawerActions.toggleDrawer())

The action 'TOGGLE_DRAWER' was not handled by any navigator.

Is your screen inside a Drawer navigator?

以下是相关文件。

MessagesStackRouter.js

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';


const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

function DrawerNavigation() {
  return (
     <Drawer.Navigator
      drawerType={"slide"}
     >
      <Drawer.Screen name="Dash" component={DashboardContainer} />
     </Drawer.Navigator>
 );
}

function MessagesStackRouter() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initalRoute="Login"
        screenOptions={{ gestureEnabled: true, headerShown: false }}
        >
        <Stack.Screen name="Login" component={LoginView} />
        <Stack.Screen name="DrawerNavigation" component={DrawerNavigation} />
        <Stack.Screen name="Dashboard" component={DashboardContainer} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default MessagesStackRouter;

App.js

  return (
    <View style={{flex:1, backgroundColor: 'white'}}>
      <StatusBar hidden={true} />
      <Provider store={createStore(reducers)}>
          <MessagesScreenRouter/>
      </Provider>
    </View>
  );

TopNavBar.js的相关部分。

import { DrawerActions } from '@react-navigation/native';

class TopNavBar extends Component {

  constructor(props) {
    super(props);

    this.onBurgerBarPress = this.onBurgerBarPress.bind(this)
  }

  onBurgerBarPress() {
    this.props.navigation.dispatch(DrawerActions.toggleDrawer())
  }

  render() {
    return (
      <View style={styles.navBar}>
        <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between', marginTop: 10 }}>
          <TouchableOpacity onPress={()=> this.onBurgerBarPress()}>
            <Icon
                name={"Menu"}
                strokeWidth="1.5"
                stroke={'#03A9F4' }
                fill={'#03A9F4'}
              />
          </TouchableOpacity>
        </View>
      </View>
    )
  }
};


const mapStateToProps = (state) => {
  return {
    onboarding: state.onboarding,
    currentUser: state.currentUser
  }
}


export default connect(mapStateToProps, actions)(TopNavBar);

Answer 1

你得到一个错误，因为你有抽屉导航器的屏幕没有呈现。你应该把堆栈导航器嵌套在抽屉导航器里面，而不是把抽屉嵌套在堆栈里面，这样对你的情况会更好。