Question

从HOC内部调用navigation.navigate（＆＃39; DrawerOpen＆＃39;）并不打开抽屉菜单

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

标题

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>
        );
    }
    }

抽屉导航器

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

});

部件（屏幕）

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>
        );
    }
}

当前行为

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

预期行为

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

如何重现

世博会网址：Snack

环境

| react-navigation | 1.5.8

| react-native | 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')}

navigation.navigate（＆＃39; DrawerOpen＆＃39;）在HOC内部不起作用