Question

我已升级到反应导航V5，但对如何使抽屉正常工作感到困惑。我以前有一个自定义的抽屉，但现在我只是想让一个示例抽屉起作用。

我正在尝试使用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

您收到一个错误，因为没有显示带有抽屉导航器的屏幕。您应该将堆栈导航器嵌套在抽屉式导航器中，而不是将抽屉嵌套在堆栈中，这将更适合您的情况。

react-navigation v5-如何切换抽屉

1 个答案: