抽屉菜单未关闭

时间:2019-07-25 15:51:59

标签: react-native react-navigation

我使用react-navigation的DrawerNavigation功能创建了一个抽屉菜单。我想创建一个可以关闭菜单的按钮,但是onPress函数似乎不起作用

我已经从'react-navigation-drawer'导入了DrawerActions,并且尝试使用不同的语法

例如。)this.props.navigation.dispatch(DrawerActions.closeDrawer());      this.props.navigation.closeDrawer();

import React, { Component } from 'react';
import {  
  Image, 
  StyleSheet, 
  Text, 
  ImageBackground, 
  TouchableWithoutFeedback, 
  View, 
  Button,
  ScrollView,
} from 'react-native';
import { 
  createDrawerNavigator,
  createStackNavigator, 
  createAppContainer,
  DrawerItems,
  SafeAreaView,
  NavigationActions
   } from 'react-navigation';

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


const navigator = createDrawerNavigator(
{
  Home: Lander,
  Page1: Lander,
  Page2: Lander,
  Page3: Lander,
  Page4: Lander,
},


{
 contentComponent: (props) => (
     <SafeAreaView>
        <View style= {{backgroundColor:'black'}}>
            <TouchableWithoutFeedback onPress={() => this.props.navigation.dispatch(DrawerActions.closeDrawer())}>
              <Image source={require('./Images/x.png')} style = {styles.cross}/>
            </TouchableWithoutFeedback>
        </View> 
        <ScrollView style= {{backgroundColor: 'black', paddingLeft: '5%'}}>
              <DrawerItems {...props} />
         </ScrollView>


   </SafeAreaView>

        )
    },






);

我最终希望能够单击x按钮并将其重定向到主屏幕。

我遇到以下错误

  

未定义不是对象(正在评估'_this.props.navigation')

2 个答案:

答案 0 :(得分:0)

您是从错误的软件包中导入DrawerActions

更改

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

收件人

import { DrawerActions } from 'react-navigation'

要关闭它,您可以这样做

onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())}

编辑:

您做错了什么,您会得到this.props,但只有props

contentComponent: (props) => (
     <SafeAreaView>
        <View style= {{backgroundColor:'black'}}>
            {//                           changed to props without this}
            <TouchableWithoutFeedback onPress={() => props.navigation.dispatch(DrawerActions.closeDrawer())}>
              <Image source={require('./Images/x.png')} style = {styles.cross}/>
            </TouchableWithoutFeedback>
        </View> 
        <ScrollView style= {{backgroundColor: 'black', paddingLeft: '5%'}}>
              <DrawerItems {...props} />
         </ScrollView>
     </SafeAreaView>    
)

答案 1 :(得分:0)

class SQLiteStorage<T: StorageModelDelegate> {
    var delegate:T

    init (delegate:T) {
      self.delegate = delegate
    }

    func createTable(tableName: TableKey) -> Bool {
          let table = Table(tableName.rawValue)

          let query = table.create(ifNotExists: true) { (builder: TableBuilder) in
                self.delegate.createColumns(for: builder) // -> this is the error comes up.
          }
    }
}

希望是有帮助的