gpt4 book ai didi

javascript - 如何在 native react 中切换抽屉导航器?

转载 作者:行者123 更新时间:2023-12-03 00:22:27 26 4
gpt4 key购买 nike

我正在使用抽屉式导航。当我单击汉堡菜单图标时,抽屉导航的抽屉不起作用,我无法切换抽屉。代码 1 不起作用,但代码 2 起作用,任何人都可以帮我找出原因吗?

代码:

    Burger menu icon code 1:

// Inside Header
navigationOptions: ({ navigation }) => ({
// headerTitle: 'Rchampz',
headerLeft:
<TouchableOpacity onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())} }>
<MenuImage navigation={navigation}/>
</TouchableOpacity>,

//Created component and added inside navigationOptions

const MenuImage = ({navigation}) => {
if(!navigation.state.isDrawerOpen){
return <TouchableOpacity><Image source={require('../assets/images/menu.png')} style={{width: 24, height: 24, resizeMode: 'contain' ,marginLeft: 15}}/></TouchableOpacity>
}else{
return <MenuIcon style={{paddingLeft: 10, paddingRight: 10}} name="md-arrow-back" size={30} color="black"/>
}
}

Burger menu icon code 2:

//Inside header

navigationOptions: ({ navigation }) => ({
// headerTitle: 'Rchampz',
headerLeft:
<TouchableOpacity onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())} }>
<MenuImage navigation={navigation}/>
</TouchableOpacity>,


//Created component and added inside navigationOptions

const MenuImage = ({navigation}) => {
if(!navigation.state.isDrawerOpen){
return <MenuIcon style={{paddingLeft: 10, paddingRight: 10}} name="md-menu" size={30} color="black"/>
}else{
return <MenuIcon style={{paddingLeft: 10, paddingRight: 10}} name="md-arrow-back" size={30} color="black"/>
}
}

最佳答案

因为您在第一个菜单图像中设置菜单图像的方式。您将图像包装在另一个 TouchableOpacity 中,这意味着内部 TouchableOpacity 正在拾取用户触摸事件。这实际上不是您想要的行为,因为您希望 headerLeft 上的 TouchableOpacity 成为输入的接收器。因此,只需删除“额外的”TouchableOpacity即可。

// Inside Header
navigationOptions: ({ navigation }) => ({
headerLeft:
<TouchableOpacity onPress={() => {navigation.dispatch(DrawerActions.toggleDrawer())} }>
<MenuImage navigation={navigation}/>
</TouchableOpacity>,

//Created component and added inside navigationOptions
const MenuImage = ({navigation}) => {
if(!navigation.state.isDrawerOpen){
// No need of Touchable here. Since you want the above Touchable to pick up the onPress event.
return <Image source={require('../assets/images/menu.png')} style={{width: 24, height: 24, resizeMode: 'contain' ,marginLeft: 15}}/>.
}else{
return <MenuIcon style={{paddingLeft: 10, paddingRight: 10}} name="md-arrow-back" size={30} color="black"/>
}
}

第二个示例有效的原因很简单,没有额外的 Touchable 处理 onPress 事件。

关于javascript - 如何在 native react 中切换抽屉导航器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54255483/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com