我需要有关TabNavigator和StackNavigator的帮助。 我想创建一个单按钮登录页面,按此按钮时,可以使用TabNavigation浏览页面。
代码..
const Tab = createMaterialBottomTabNavigator();
const StackNavigation = createStackNavigator();
function NavigateStack() {
return (
<StackNavigation.Navigator initialRouteName="StackLogin">
<StackNavigation.Screen name="StackLogin" component={StackLogin} />
</StackNavigation.Navigator>
);
}
function NavigateTab() {
return (
<NavigationContainer>
<Tab.Navigator initialRouteName="TabLocation" screenOptions={{ tabBarColor: '#2D95EA' }}>
<Tab.Screen
name="TabLocation"
component={TabLocation}
options={{
tabBarLabel: '',
tabBarIcon: (props) =<Image source={MapIcon} style={{ width: 70, height: 70 }} />
}}/>
<Tab.Screen
name="TabHistoryOfIsland"
component={TabHistoryOfIsland}
options={{
tabBarLabel: '',
tabBarIcon: (props) =<Image source={InfoIcon} style={{ width: 70, height: 70 }}
/> }} />
<Tab.Screen
name="TabNewPointOnMap"
component={TabNewPointOnMap}
options={{
tabBarLabel: '',
tabBarIcon: (props) =<Image source={PictureIcon} style={{ width: 70, height: 70 }} />
}}
/>
<Tab.Screen
name="TabFauna"
component={TabFauna}
options={{
tabBarLabel: '',
tabBarIcon: (props) =<Image source={FaunaIcon} style={{ width: 70, height: 70 }} />
}}/>
<Tab.Screen
name="TabFlora"
component={TabFlora}
options={{
tabBarLabel: '',
tabBarIcon: (props) =<Image source={FloraIcon} style={{ width: 70, height: 70 }}/>
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
export default function Routes() {
return (
<NavigationContainer>
<StackNavigation.Navigator initialRouteName="NavigateStack">
<StackPoint.Screen name="NavigateStack" component={NavigateStack} />
/**
* Error line below
*/
<Tab.Screen name="NavigateTab" component={NavigateTab} />
</StackNavigation.Navigator>
</NavigationContainer>
);
}