Блог

Я хочу открыть ящик с помощью значка, но я не знаю, как это работает, не могли бы вы мне помочь, пожалуйста? Я использовал реквизит, но не знаю, лучшая ли это идея или хорошая. Кроме того, если это возможно, как я могу не видеть имя «главная» в своем ящике, но иметь главную страницу, когда я загружаю свое приложение?(Этот вопрос является дополнительным)

 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
 

Спасибо всем

Ваш подход кажется правильным, но здесь, в _goToDrawer функции, есть опечатка, которая приводит к navigation.openDrawer тому, что она не вызывается:

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