时间戳

首页 > 解决方案 > 如何使用本机反应在选项卡之外导航？

reactjs - 如何使用本机反应在选项卡之外导航？

问题描述

我想从标签屏幕内部导航到另一个屏幕。

我的问题是我无法在选项卡之外导航。

当我按下花朵图像导航到我的登录屏幕时，登录屏幕会在当前选项卡内打开！

花图片

登录页面

这是我的堆栈导航器。该项目包含选项卡导航

import { createAppContainer, createStackNavigator, createDrawerNavigator } from 'react-navigation';

const AppStackNavigator = createStackNavigator({

    Login: Login,
    Developer: Developer,
    Projects: Projects,

},

    {
        headerMode: 'none',
        navigationOptions: {
            headerVisible: false,
        }
    });

这是我的标签导航器屏幕：

const TabNavigator = createMaterialTopTabNavigator({



    Photo: {
        screen: check_note_type2,

        navigationOptions: {
            tabBarIcon: (<Image
                style={{resizeMode:'contain', width: wp('4%'), height: hp('5%'), tintColor: '#bfb288' }}
                source={require('../assets/photo.png')} />)
        }
    },

    Voice: {
        screen: check_note_type3,
        navigationOptions: {
            tabBarIcon: (<Image
                style={{ resizeMode:'contain',width: wp('4%'), height: hp('5%'), tintColor: '#bfb288' }}
                source={require('../assets/voice.png')} />)
        }
    },


    Text: {
        screen: check_note_type4,
        navigationOptions: {
            tabBarIcon: (<Image
                style={{ resizeMode:'contain',width: hp('4%'), height: hp('5%'), tintColor: '#bfb288' }}
                source={require('../assets/note.png')} />)
        }
    },

标签： reactjsreact-nativereact-routerreact-navigation

解决方案

在这种情况下，您可以通过 react-navigation 提供的 API 在组件外部使用导航道具：

https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

推荐阅读