React Native Navigation — нижние вкладки и ящик

Я пытаюсь добавить нижнюю панель вкладок в свое приложение 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, приложение работает (но без нижней панели вкладок)

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
0
0
3 212
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

На самом деле получается, что для каждой нижней вкладки необходимо установить иконку, иначе приложение вылетает:

  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
              }
            }
          }
        }
      ]
    }
  }
}

Другие вопросы по теме