Question

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

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

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

Stack Navigator（主页是带有按钮的组件，应将其定向到抽屉屏幕“日志”）：

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())} />,
            })
        },
    }
);

Answer 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

React-Native：在Stack导航器中导航到抽屉

1 个答案: