反应本机嵌套导航默认路由

时间:2020-04-02 08:52:37

标签: react-native react-navigation

我有一个带有嵌套导航器的react项目,并观察到一个奇怪的行为。选项卡导航器可以进入堆栈导航器页面(我简化了,选项卡和堆栈具有更多的屏幕)。它可以工作,但是,尽管有initialRouteName参数,但在单击选项卡“投资”按钮时显示的堆栈中的第一个屏幕将成为默认显示的屏幕。因此,如果用户首先在仪表板上的“空投”上单击,则在空投页面上没有特定按钮的情况下就无法访问投资优先屏幕,这非常不方便(尤其是堆栈实际有页面左右)。我该怎么解决?

const Tab = createBottomTabNavigator();

function MyTab() {
    const { language, theme } = useContext(JubileeContext );
    const iconSize = 24
    return ( 
    <Tab.Navigator tabBarOptions={{
                activeTintColor: themes[theme].color2,
                labelStyle: { fontSize: 12 }
            }}
    >
        <Tab.Screen name="Dashboard" component={DashboardScreen} options={{
            tabBarLabel: strings[language].bottom_navbar.dashboard,
            tabBarIcon: ({ color, size }) => (
                <Icon name="gauge" color={color} size={iconSize} />
                ),
            }}
        />
        <Tab.Screen name="Invest" component={Invest} options={{
            tabBarLabel:strings[language].bottom_navbar.invest,
            tabBarIcon: ({ color, size }) => (
            <Icon name="chart-line" color={color} size={iconSize} />
            ),
            }}
        />
    </Tab.Navigator>
    );
}

//Stack
const InvestStack = createStackNavigator( );
function Invest() {
    return(
        <InvestStack.Navigator
            screenOptions={{
                headerShown: false
            }}
            initialRouteName="Invest"
        >
            <InvestStack.Screen name="Invest" component={InvestScreen} />
            <InvestStack.Screen name="Airdrop" component={AirdropScreen} />
        </InvestStack.Navigator>
    );
}

0 个答案:

没有答案