找不到变量:DrawerActions

问题描述 投票:0回答:2

我是很新的反应母语。我想提出具有堆栈导航沿抽屉导航一个示例应用程序。我在抽屉按钮一次又一次让抽屉的代码错误。如何打开和关闭我的抽屉里?我曾尝试搜索了很多互联网上。并试图不管我了。但没有任何帮助。任何帮助表示赞赏。我写了下面的代码:

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”。

Try1:

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

遇到错误:

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

Try2:

this.props.navigation.openDrawer()  

在此也得到了错误。

react-native react-navigation react-navigation-stack react-navigation-drawer
2个回答
0
投票

你忘了

import { DrawerActions } from 'react-navigation'

0
投票

为了您DrawerActions必须首先导入从反应导航DrawerActions。对于阵营导航3.X

从“反应导航抽屉”进口{DrawerActions};

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

你是好去!

© www.soinside.com 2019 - 2024. All rights reserved.