Android 反应本机：导航到堆栈导航器中的抽屉_Android_Ios_Reactjs_React Native_React Navigation

Android 反应本机：导航到堆栈导航器中的抽屉

android ios reactjs react-native

Android 反应本机：导航到堆栈导航器中的抽屉,android,ios,reactjs,react-native,react-navigation,Android,Ios,Reactjs,React Native,React Navigation,我的应用程序当前使用抽屉导航器作为主要导航其中一个抽屉屏幕是StackNavigator。此嵌套StackNavigator中的第一个屏幕包含一个按钮，该按钮应将用户指向抽屉导航器屏幕如何在StackNavigator屏幕“主页”中设置一个按钮，以导航到其父抽屉导航器屏幕“日志” 堆栈导航器（主页是带有按钮的组件，该按钮应指向抽屉屏幕“日志”）：带标题的堆栈： class StackWithHeader extends Component { render() {

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

其中一个抽屉屏幕是StackNavigator。此嵌套StackNavigator中的第一个屏幕包含一个按钮，该按钮应将用户指向抽屉导航器屏幕

如何在StackNavigator屏幕“主页”中设置一个按钮，以导航到其父抽屉导航器屏幕“日志”

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

带标题的堆栈：

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

类StackWithHeader扩展组件{
render（）{
返回(
this.props.navigation.dispatch（DrawerActions.openDrawer（））}/>
)
}
}

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

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

const Drawer=createDrawerNavigator(
{
负责人：{
屏幕：StackWithHeader，
导航选项：（{navigation}）=>({
标题：“头”，
headerLeft:this.props.navigation.dispatch（DrawerActions.openDrawer（））}/>，
})
},
日志：{
屏幕：日志，
导航选项：（{navigation}）=>({
标题：“日志”，
headerLeft:this.props.navigation.dispatch（DrawerActions.openDrawer（））}/>，
})
},
}
);

在这种情况下，使用

导航操作可能会对您有所帮助
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导航集成起来，以便轻松导航。提及
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' }),
    })
  )
}