代码之家 › 专栏 › 技术社区 › fun joker

如何在React Native中切换抽屉导航器?

react-native reactjs javascript

fun joker · 技术社区 · 5 年前

我正在使用抽屉导航。当我点击汉堡包菜单图标时,抽屉导航的抽屉不工作,我无法切换抽屉。代码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"/>
        }
    }

1 回复 | 直到 5 年前

Sean Wang 5 年前

因为您在第一个菜单中设置了菜单图像。你把图像包装在另一个 TouchableOpacity 这意味着 可触摸不透明度 正在接收用户触摸事件。这不是你想要的行为,因为你想要 可触摸不透明度 在HeaderLeft上作为输入的接收器。所以只需去掉“多余的” 可触摸不透明度 .

// 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事件。

推荐文章

user19476497 · 如何使用useState修改数组以使其成为React中的常数

2 年前

Muhammad Ashraf · 反应:过滤从具有特定键的对象数组中获取值,并将结果分组到数组中

2 年前

John · 如何确定Javascript自引用循环是否完成[重复]

2 年前

Herc · 将用户信息添加到firebase(注册)react native

2 年前

Bonhart · 有没有更好的方法按名称查找数组中的特定对象?

2 年前

ubermo · 如何在React本机自定义组件中使用状态?

2 年前

ramanujans alkhazarim · 错误“元素类型无效”React Native

2 年前

Audrey K · 有没有办法降级React Native?

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前

Tedi · 如何将单个数据从子组件传递到父组件?

2 年前