Я пытаюсь добавить нижнюю панель вкладок в свое приложение jhipster ignite, которое использует react-native-navigation v2.
Экраны зарегистрированы как:
Navigation.registerComponentWithRedux(LAUNCH_SCREEN, () => LaunchScreen, Provider, store)
Где, например:
export const LAUNCH_SCREEN = 'nav.LaunchScreen'
А вот и полная навигация:
export const topBar = {
title: {
text: 'MDNGHT',
color: Colors.snow
},
leftButtons: [
{
id: 'menuButton',
icon: Images.menuIcon,
testID: 'menuButton',
color: Colors.snow
}
]
}
export const launchScreenComponent = {
component: {
id: 'id.launch',
name: LAUNCH_SCREEN,
options: {
topBar: topBar,
bottomTab: {
fontSize: 12,
text: 'HOME'
}
}
}}
export const eventsScreenComponent = {
component: {
id: 'id.events',
name: EVENTS_SCREEN,
options: {
topBar: topBar,
bottomTab: {
fontSize: 12,
text: 'EVENTS'
}
}
}
}
export const bottomTabs = {
id: 'bottomTabs',
children: [
{
stack: {
children: [
launchScreenComponent
]
}
},
{
stack: {
children: [
eventsScreenComponent
]
}
}
],
options: {
bottomTabs: {
activeTintColor: 'red',
inactiveTintColor: 'grey',
backgroundColor: '#121212',
borderTopWidth: 0,
shadowOffset: {width: 5, height: 3},
shadowColor: 'black',
shadowOpacity: 0.5,
elevation: 5
}
}
}
export const appStack = {
root: {
sideMenu: {
left: {
component: {
name: DRAWER_CONTENT
}
},
center: {
bottomTabs: bottomTabs
}
}
}
}
Navigation.events().registerAppLaunchedListener(() => {
Navigation.setDefaultOptions({
topBar: {
topBar: {
title: {
color: Colors.snow
}
},
backButton: {
showTitle: false,
testID: 'backButton',
icon: Images.chevronLeftIcon,
color: Colors.snow,
iconColor: Colors.snow
},
background: {
color: Colors.background
}
},
sideMenu: {
left: {
enabled: false
}
}
})
Navigation.setRoot(appStack)
// handle app state and deep links
AppState.addEventListener('change', handleAppStateChange)
Linking.addEventListener('url', handleOpenURL)
})
Я не получаю сообщения об ошибке, мое приложение просто останавливается после запуска. Когда я ставлю:
stack: {
id: 'center',
children: [launchScreenComponent]
}
Вместо bottomTabs: bottomTabs в appStack, приложение работает (но без нижней панели вкладок)





На самом деле получается, что для каждой нижней вкладки необходимо установить иконку, иначе приложение вылетает:
bottomTab: {
fontSize: 12,
text: 'HOME'
icon: require('../shared/images/logo.png')
}
Это решает проблему.
Следуя Макет документов из react-native-navigation, вы можете заменить appStack на реализацию bottomTabs вместо ящика, как показано ниже (в качестве примера настроена только одна вкладка, добавьте другой объект в root.bottomTabs.children, чтобы добавить еще одну вкладку).
export const appStack = {
root: {
bottomTabs: {
children: [
{
stack: {
id: 'firstTabStack',
children: [
{
component: {
name: LAUNCH_SCREEN,
options: {
topBar: {
title: {
text: 'Welcome!',
color: Colors.snow
}
}
}
}
}
],
options: {
bottomTab: {
iconColor: 'gray',
textColor: 'gray',
selectedIconColor: 'black',
selectedTextColor: 'black',
text: 'Launch Screen',
testID: 'LAUNCH_SCREEN',
icon: Images.menuIcon
}
}
}
}
]
}
}
}