反应本机抽屉导航在按钮单击时不起作用

Posted 2023-03-22

【中文标题】反应本机抽屉导航在按钮单击时不起作用

【英文标题】：React native drawer navigation not working on button click

【发布时间】：2018-10-17 02:30:51

【问题描述】：

我为抽屉导航添加了一个代码，但它似乎不起作用。有人可以帮我解决这个问题吗？

抽屉导航.js

import React from 'react';
import  AppRegistry from 'react-native';
import  createDrawerNavigator  from 'react-navigation';
import  Icon  from 'react-native-elements';

import link from '../link';
export const Drawer = createDrawerNavigator(
    link: 
        screen: link,
        navigationOptions: 
            drawerLabel: "Drawer Item 1",
            drawerIcon: ( tintColor ) => <Icon name="rocket" size=24 />
        ,
    
);

AppRegistry.registerComponent('myapp', () => Drawer);

在 navigator/index.js 中，我正在为我在左侧创建的汉堡包按钮调用 DrawerOpen onPress 函数。

import React from 'react';
import createStackNavigator from 'react-navigation';
import  Icon  from 'react-native-elements';
import  ScrollView, Text, StyleSheet, View, Button from 'react-native';
import  TouchableOpacity  from 'react-native';
import iosIcon from "react-native-vector-icons/Ionicons";


import Tabs from "./TabbedNavigation";
import Drawer from "./DrawerNavigation";

export default createStackNavigator(
    Tabs: 
        screen: Tabs,
        navigationOptions: ( navigation ) => (
                title: 'Flurry Fit',
                //headerLeft:<Icon name="menu" size=30 iconStyle=padding: 8 onPress= () => navigation.navigate('DrawerOpen')  />,
                headerLeft:(
              <TouchableOpacity onPress=() => navigation.navigate('DrawerOpen')><!-- Button click event seems having an issue. -->
                <IOSIcon name="ios-menu" size=30 />
              </TouchableOpacity>
            ),
              headerRight:<Button onPress=() => alert('Link to Map') title="Map" color="#000" style=fontSize: 14/>,
                    )
    ,
,

    //mode: 'modal',
    //headerMode: 'screen',
);

【参考方案1】：

我不确定您所说的“不工作”是什么意思。但我使用 toggleDrawer() 方法来显示/隐藏抽屉菜单。

  import  createStackNavigator,createDrawerNavigator, DrawerItems, SafeAreaView   from 'react-navigation';

 onPress=()=> navigation.toggleDrawer()