React-Native：导航到堆栈导航器中的抽屉答案

【问题标题】：React-Native: Navigate to drawer within Stack navigatorReact-Native：导航到堆栈导航器中的抽屉
【发布时间】：2018-12-09 14:27:22
【问题描述】：

我的应用目前使用抽屉式导航器作为其主导航。

其中一个抽屉屏幕是 StackNavigator。此嵌套 StackNavigator 中的第一个屏幕包含一个按钮，该按钮应将用户引导至 DrawerNavigator 屏幕。

如何在我的 StackNavigator 屏幕“主页”中有一个按钮可以导航到其父 DrawerNavigator 屏幕“日志”？

堆栈导航器（主页是带有按钮的组件，应该指向抽屉屏幕“日志”）：

const Stack = createStackNavigator({
    Home: {
        screen: Home,
        navigationOptions: { header: null }
    },
    Settings: {
        screen: Settings,
        navigationOptions: { header: null }
    }
});

与标题堆栈：

class StackWithHeader extends Component {
    render() {
        return (
            <Container>
                <Head title="Consultation" drawerOpen={() => this.props.navigation.dispatch(DrawerActions.openDrawer())} />
                <Stack/>
            </Container>
        )
    }
}

带有嵌套堆栈导航器的抽屉导航器：

const Drawer = createDrawerNavigator(
    {
        Head: {
            screen: StackWithHeader,
            navigationOptions: ({ navigation }) => ({
                title: "Head",
                headerLeft: <Icon name="menu" style={{ paddingLeft: 10 }} onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())} />,
            })
        },
        Logs: {
            screen: Logs,
            navigationOptions: ({ navigation }) => ({
                title: "Logs",
                headerLeft: <Icon name="menu" style={{ paddingLeft: 10 }} onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())} />,
            })
        },
    }
);

【问题讨论】：

标签： android ios reactjs react-native react-navigation

【解决方案1】：

在这种情况下使用 NavigationActions 可能会对您有所帮助

import { NavigationActions } from 'react-navigation';

...
_onPress = () => {
  this.props.navigation.dispatch(
    NavigationActions.navigate({
      routeName: 'Logs',
      params: {},
      // optional, you can navigate to sub-route of Logs here by
      // action: NavigationActions.navigate({ routeName: 'SubRoute' }),
    })
  )
}

顺便说一句，我建议您将redux 与react-navigation 集成以简单地导航。参考here

【讨论】：