React-Native：导航到堆栈导航器中的抽屉
Posted
技术标签:
【中文标题】React-Native：导航到堆栈导航器中的抽屉【英文标题】：React-Native: Navigate to drawer within Stack navigator 【发布时间】：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()) />,
)
,
);
【问题讨论】：
【参考方案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：导航到堆栈导航器中的抽屉的主要内容，如果未能解决你的问题，请参考以下文章