navigation.navigate（'DrawerOpen'）在HOC内部不起作用

Question

从HOC内部调用navigation.navigate（'DrawerOpen'）不会打开抽屉菜单

I have written a higher order component which returns a screen with header  for drawer navigator.

Header

const Header = (props)=>{

    return (
        <View style={{flex:1,backgroundColor:"red",justifyContent:"center"}}>
                    <TouchableWithoutFeedback  onPress={() => {
                        props.navigation.navigate('DrawerOpen');
                        if (props.navigation.state.index === 0) {
                            props.navigation.navigate('DrawerOpen')
                        } else {
                            props.navigation.navigate('DrawerClose')
                        }
                    }}>
                        <View >
                            <Text style={{fontSize:20,color:"white"}}>{"Menu"}</Text>
                        </View>
                    </TouchableWithoutFeedback>
            </View>
    );
}

HOC

 const createCompWithHeader = (Comp)=>{

    return (props)=>{
        return (

            <View style={{flex:1,marginTop:20}}>
                <Header {...props}/>
                <View style={{flex:9}}>
                    <Comp {...props}/>
                </View>      
            </View>
        );
    }
    }

Drawer Navigator

const MyApp = DrawerNavigator({
        Home: {
        screen: createCompWithHeader(MyHomeScreen),
    },
    Notifications: {
        screen: createCompWithHeader(MyNotificationsScreen),
    },

});

Components(Screens)

class MyHomeScreen extends Component {
    static navigationOptions = {
        drawerLabel: 'Home'
    };
    render() {
        return (
            <View>
                <Button 
                    onPress={()=>this.props.navigation.navigate('DrawerOpen')} 
                    title={"Open menu"}
                />
                <Button
                    onPress={() => this.props.navigation.navigate('Notifications')}
                    title="Go to notifications"
                />
            </View>
        );
    }
}

class MyNotificationsScreen extends Component {
    static navigationOptions = {
        drawerLabel: 'Notifications'
    };

    render() {
        return (
            <View>
            <Button 
                onPress={()=>this.props.navigation.navigate('DrawerOpen')} 
                title={"Open Menu"}
            />
            <Button
                onPress={() => this.props.navigation.goBack()}
                title="Go home"
            /></View>
        );
    }
}

---

Current Behavior

• 当我点击标题中的按钮（props.navigation.navigate（'DrawerOpen'））时，抽屉菜单无法打开
• 当我单击组件内的按钮时，菜单打开

Expected Behavior

• 单击标题中的按钮，菜单应该打开。

How to reproduce

• 世博会网址：Snack

Environment

|反应导航| 1.5.8

|反应原生| 0.55.2

Answer 1

2.0版本发布后，您现在可以调用navigation.navigate(‘DrawerOpen’)，而不是用navigation.openDrawer()打开抽屉。

其他方法是closeDrawer()和toggleDrawer()。

Answer 2

我已经检查了你的零食展，问题在于这个片段

 if (props.navigation.state.index === 0) {
                            props.navigation.navigate('DrawerOpen')
                        } else {
                            props.navigation.navigate('DrawerClose')
                        }

导航不会向状态添加索引，因此它的值仍未定义

所以你要做的就是自己打开和关闭抽屉

因此，请删除此代码段以查看其是否有效。

onPress={() => props.navigation.navigate('DrawerOpen')}