[英]How to Open Drawer On OnPress from Stack.Screen in react native
[英]React Native How to open Drawer by icon
我想通過圖標打開抽屜,但我不知道它是如何工作的,你能幫我嗎? 我使用了道具,但我不知道這是最好的還是好主意。 另外,如果可能的話,當我啟動我的應用程序時,我怎么能在我的抽屜里看不到“家”的名字但有主頁?(這個問題是可選的)
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
func 中,導致navigation.openDrawer
沒有被調用:
onPress={ () => this.props.onPress}>
// should be:
onPress={ () => this.props.onPress() }>
// or:
onPress={this.props.onPress}>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.