Значки, не отображаемые для React Navigation Bottom Tab Bar в версии 3 - PullRequest
Новая
       7

Значки, не отображаемые для React Navigation Bottom Tab Bar в версии 3

0 голосов
/ 06 января 2019

Я недавно обновил реагирующую навигацию до версии 3 и запустил мое приложение, но, похоже, произошла ошибка рендеринга с иконками нижней панели вкладок. Значки не отображаются вообще, даже если отображается ярлык Я использую response-native-vector-icons для визуализации значков.

Я попытался установить для свойства showIcon значение true в параметрах панели вкладок, но это также не решает проблему для меня. Я также попытался понизить реагирующую навигацию до v2.x, но это не помогло решить проблему 

const TabNavigatorConfig = {
  navigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused }) => {
      const { routeName } = navigation.state;
      let iconName;
      switch (routeName) {
        case 'Batches':
          iconName = 'home';
          break;
        case 'Settings':
          iconName = 'settings';
          break;
        default:
          iconName = 'home';
          break;
      }
      return (
        <Icon
          size={22}
          name={iconName}
          color={focused ? colors.secondary.normal : colors.other.bbIconNormal}
        />
      );
    },
  }),
  animationEnabled: false,
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  backBehavior: 'none',
  tabBarOptions: {
    showIcon: true,
    style: {
      backgroundColor: colors.other.bgNormal,
    },
  },
};

Ожидаемый результат - наличие активного значка с определенным оттенком и неактивного значка с другим оттенком. Однако фактические результаты таковы, что значок не отображается вообще. Я не думаю, что это проблема с векторными значками, потому что они отлично отображаются во всем приложении. Есть ли проблема с кодом? Или, возможно, другой метод для React Navigation v3.

1 Ответ

0 голосов
/ 06 января 2019

Я запускаю ваш код с небольшими изменениями, и вам просто нужно использовать defaultNavigationOptions вместо navigationOptions

...