React-Native：导航到Stack导航器中的抽屉-Java 学习之路

我的应用程序目前使用抽屉导航器作为其主要导航 .

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

如何在我的StackNavigator屏幕“Home”中有一个按钮，导航到其父DrawerNavigator屏幕“Logs”？

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

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

带嵌套Stack Navigator的抽屉导航器：

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

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

回复于 2024-04-29T09:27:14+08:00

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

1 回答

相关问题