React Native 如何通过图标打开抽屉

Question

我想通过图标打开抽屉，但我不知道它是如何工作的，你能帮我吗？我使用了道具，但我不知道这是最好的还是一个好主意。另外，如果可能的话，当我启动我的应用程序时，我怎么能在我的抽屉里看不到“主页”名称但有主页面？（这个问题是可选的）

import React from 'react'
import MainPage from '../Components/MainPage'
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

const Drawer = createDrawerNavigator();

function _MainPage({ navigation }) {
    return (
        <MainPage onPress={() => navigation.openDrawer()}/>
    );
}

class Navigation extends React.Component {
    
    render() {
          return (
              <NavigationContainer>
                    <Drawer.Navigator initialRouteName="Home">
                        <Drawer.Screen name="Home" component={_MainPage}/>
                    </Drawer.Navigator>
              </NavigationContainer>
          );
      }
  }

export default Navigation

import React from 'react'
import { View, Text, Image, StyleSheet, Touchable, TouchableOpacity } from 'react-native'
import Mode from './Mode'
import AppLoading from 'expo-app-loading';
import * as Font from 'expo-font'

let customFonts = {
    'bungee': require ('../assets/fonts/Bungee-Regular.ttf')
}

class MainPage extends React.Component {
    
    _goToDrawer() {
        return(
            <TouchableOpacity 
                style={styles.image}
                onPress={ () => this.props.onPress}>
                <Image source={require('../Images/menu.png')} />
            </TouchableOpacity>
        )
    }

    state = {
        fontsLoaded: false,
    };

    async _loadFontsAsync() {
        await Font.loadAsync(customFonts);
        this.setState({ fontsLoaded: true });
    }

    componentDidMount() {
        this._loadFontsAsync();
    }
    
    render() {
        if (this.state.fontsLoaded) {
            return (
                <View style={styles.main_container}>
                    {this._goToDrawer()}
                    <View style={styles.title_container}>
                        <Text style={styles.title}>Roadeo</Text>
                    </View>
                    <View style={styles.normal_container}>
                        <Mode style={styles.mode} title="NORMAL" />
                        <Mode style={styles.mode} title="AVANCÉ" />
                        <Mode style={styles.mode} title="HOT"    />
                        <Mode style={styles.mode} title="PREMIUM"/>
                    </View>
                </View>
            )
        } else {
            return <AppLoading/>
        }
    }
}

const styles = StyleSheet.create({
    main_container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: "#E1D6D6",
    },
    title_container: {
        position: 'absolute',
        top: 130
    },
    title: {
        fontSize: 45,
        color: "#FE5858",
        fontFamily: 'bungee'
    },
    normal_container: {
        position: 'absolute',
        top: 250,
        height: 450,
        flexDirection: 'column',
        justifyContent: 'space-between'
    },
    mode: {
        color: '#FFFFFF',
        fontSize: 25,
        fontFamily: 'bungee',
        backgroundColor: "#B2ADAD",
        height: 70,
        width: 300,
        borderRadius: 25,
        textAlign: 'center',
        textAlignVertical: 'center'
    },
    image: {
        position: 'absolute',
        top: 40,
        left: 20
    }
})

export default MainPage

谢谢大家

Answer 1

你的方法似乎是正确的，但这里有一个错字，在 _goToDrawer 函数中，导致 navigation.openDrawer 没有被调用：

onPress={ () => this.props.onPress}>
// should be:
onPress={ () => this.props.onPress() }>
// or:
onPress={this.props.onPress}>

React Native 如何通过图标打开抽屉

React Native How to open Drawer by icon

javascript

navigation-drawer

reactjs

react-native