我有一个带有嵌套导航器的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>
);
}