Я заставляю реагировать нативные приложения, где мое приложение похоже на рыночное приложение.Мое приложение имеет навигацию по нижней вкладке как корневую навигацию с 5 вкладками, а пятая вкладка содержит switchNavigator для аутентификации, если пользователь успешно вошел в систему / зарегистрируется, затем переключится на profileStack и останется в loginStack, когда не вошел в систему. Когда я хочуустановите, чтобы видимость tabTat bottomTabNavigator исчезала, когда стек экрана profileStack> 0, это означает, что tabT bottomTabNavigator виден только на главной странице профиля и не отображается на странице editprofile, но с switchNavigator внутри bottomTabNavigator панель вкладок продолжаетпоявляются до страницы editprofile
мое приложение, использующее версию lib: "реагировать": "16.6.3", "реагировать-нативно": "0.58.6", "реагировать-навигация": "^ 3.3.2"
import {createStackNavigator, createMaterialTopTabNavigator, createBottomTabNavigator, createSwitchNavigator, createAppContainer} from 'react-navigation';
const LoginStack = createStackNavigator({
LogIn :{screen: LogIn, navigationOptions: ({ navigation }) => ({header: null}) },
Register :{screen: Register, navigationOptions: ({ navigation }) => ({header: null}) },
RegisterPassword :{screen: RegisterPassword, navigationOptions: ({ navigation }) => ({header: null}) }
},{
initialRouteName: 'LogIn'
})
LoginStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;
}
return {
tabBarVisible,
};
};
const ProfileStack = createStackNavigator({
Profile :{screen: Profile, navigationOptions: ({ navigation }) => ({header: null}) },
MyPoint :{screen: MyPoint, navigationOptions: ({ navigation }) => ({header: null}) },
EditProfileMenu :{screen: EditProfileMenu, navigationOptions: ({ navigation }) => ({header: null}) },
EditProfile :{screen: EditProfile, navigationOptions: ({ navigation }) => ({header: null}) },
ProfileAddress :{screen: ProfileAddress, navigationOptions: ({ navigation }) => ({header: null}) }
},{
initialRouteName: 'Profile'
})
ProfileStack.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;
}
return {
tabBarVisible,
};
};
const AuthSwitch = createSwitchNavigator({
AuthChecker: { screen: AuthChecker,
navigationOptions: ({ navigation }) => ({title: 'AuthChecker'}) },
LoginStack: { screen: LoginStack},
ProfileStack: { screen: ProfileStack}
},{
initialRouteName: 'AuthChecker'
})
AuthSwitch.navigationOptions = ({ navigation }) => {
let tabBarVisible = true;
if (navigation.state.index > 0) {
tabBarVisible = false;
}
return {
tabBarVisible,
};
};
const AppNavigator = createBottomTabNavigator({
Home :{screen: HomeStack,
navigationOptions:{
tabBarLabel: "Home",
tabBarIcon: ({ focused }) => (
// <Ionicons name="ios-home" color={tintColor} size={24} />
focused ?
<Image source={require('../assets/images/nav/home_active.png')} style={{width:23, height:23}} />
: <Image source={require('../assets/images/nav/home.png')} style={{width:23, height:23}} />
)
}},
FastShop :{screen: FastShopStack,
navigationOptions:{
tabBarLabel: "Fast Shop",
tabBarIcon: ({focused}) => (
// <Ionicons name="ios-cart" color={tintColor} size={24} />
focused ?
<Image source={require('../assets/images/nav/fast_shop_active.png')} style={{width:23, height:23}} />
: <Image source={require('../assets/images/nav/fast_shop.png')} style={{width:23, height:23}} />
)
}},
MyOrder :{screen: MyOrderStack,
navigationOptions:{
tabBarLabel: "My Order",
tabBarIcon: ({focused}) => (
// <Ionicons name="ios-list-box" color={tintColor} size={24} />
focused ?
<Image source={require('../assets/images/nav/myorder_active.png')} style={{width:23, height:23}} />
: <Image source={require('../assets/images/nav/myorder.png')} style={{width:23, height:23}} />
)
}},
Inbox :{screen: Inbox,
navigationOptions:{
tabBarLabel: "Inbox",
tabBarIcon: ({focused}) => (
// <Ionicons name="ios-chatbubbles" color={tintColor} size={24} />
focused ?
<Image source={require('../assets/images/nav/inbox_active.png')} style={{width:28, height:23}} />
: <Image source={require('../assets/images/nav/inbox.png')} style={{width:28, height:23}} />
)
}},
Account :{screen: AuthSwitch,
navigationOptions:{
tabBarLabel: "Account",
tabBarIcon: ({focused}) => (
// <Ionicons name="ios-contact" color={tintColor} size={24} />
focused ?
<Image source={require('../assets/images/nav/akun_active.png')} style={{width:23, height:23}} />
: <Image source={require('../assets/images/nav/akun.png')} style={{width:23, height:23}} />
)
}},
},{
initialRouteName: 'Home',
tabBarOptions: {
style: {
backgroundColor: '#FFF',
height:50
},
activeTintColor: '#2EB499',
inactiveTintColor: 'gray',
labelStyle: {
fontSize: 10,
},
}
}
);
const App = createAppContainer(AppNavigator);
export default App;
Я ожидаю, что панель вкладок profileStack и loginStack отображаются только на странице профиля и входа в систему InitialRoute