1

我对 react-native 很陌生。我正在制作一个具有抽屉导航和堆栈导航的示例应用程序。我在抽屉按钮的抽屉代码中一次又一次地收到错误。如何打开和关闭抽屉？我试图在互联网上搜索很多。并尝试了我得到的任何东西。但没有任何帮助。任何帮助表示赞赏。我写了以下代码：

import React, {Component} from 'react';
import {createDrawerNavigator, createStackNavigator, createAppContainer} from 'react-navigation';
import {TouchableOpacity, Text} from 'react-native';
import Signup from './Screens/Signup'; 
import SignIn from './Screens/SignIn';
import TradeType from './Screens/TradeType';
import SState from './Screens/SState';
import IState from './Screens/IState';
import Result from './Screens/Result';
import Home from './Screens/Home';
import DrawerTbl from './Screens/DrawerTbl';

export const Drawer = createDrawerNavigator({
  SignIn: {screen: SignIn},
  Home: {screen: Home},
}, {
  initialRouteName: 'SignIn',
  contentComponent: 'DrawerTbl',
  drawerWidth: 300
});

export const Stack = createStackNavigator({
  SignIn: {screen: SignIn,
  navigationOptions: ({navigation}) => ({
     headerLeft:(
        <TouchableOpacity onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
          <Text>Drawer</Text>
        </TouchableOpacity>
     ),
   })
 },
   Signup: {screen: Signup},
   Home: { screen: Home },
   Drawer: { screen: Drawer },
   DrawerTbl: { screen: DrawerTbl },
   Trade: { screen: TradeType },
   SState: { screen: SState },
   IState: { screen: IState },
   Result: { screen: Result } 
 },
 {
    initialRouteName: "SignIn",
 });

const AppC = createAppContainer(Stack);

class App extends Component {
  render() {
    return(
     <AppC/>
    );
  }
}

export default App;

我收到以下错误：找不到变量：'DrawerActions'。

尝试1：

navigationOptions: ({navigation}) => ({
  headerLeft:(
    <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
      <Text>Drawer</Text>
    </TouchableOpacity>
  ),
})

得到错误：

Undefined is not a function(evaluating'navigation.toggleDrawer()')

尝试2：

this.props.navigation.openDrawer()

这也有错误。

4

3 回答 3

1

你忘了

import { DrawerActions } from 'react-navigation'
于 2019-02-05T09:24:40.050 回答
1

对于您 DrawerActions，您必须首先从 react-navigation 导入 DrawerActions。对于React 导航 3.x

从'react-navigation-drawer'导入{ DrawerActions }；

this.props.navigation.dispatch(DrawerActions.toggleDrawer())

你可以走了！

于 2019-02-07T04:40:35.347 回答
1

导入DrawerActions的方式会随 React Navigation 版本而变化，因此最好搜索它以查找您的文档版本。

对于 React Navigation 4.X：

import { DrawerActions } from 'react-navigation-drawer';

对于 React Navigation 5.X：

import { DrawerActions } from '@react-navigation/native';
于 2020-09-28T18:51:10.730 回答