установить цвет значка панели вкладок в реагировать на родную навигацию - PullRequest
Новая
       30

установить цвет значка панели вкладок в реагировать на родную навигацию

1 голос
/ 31 мая 2019

Есть ли способ динамически установить значок новой вкладки и цвет? В моем приложении я хочу, чтобы значок для вкладки ЧАТ менялся на красный при поступлении нового сообщения.

Действия по воспроизведению / фрагменты кода / скриншоты 

    this.props.navigator.setTabButton(
        {
                tabIndex: 2,
                screen: 'parkour.ChatListScreen',
                title: 'Chat',
                icon: iconsMap[2],
                style: { color: 'red' }
        },

свойство style вообще не работает, результирующий цвет - желтый.

Я использую реагирующую нативную навигацию v.1.

Ответы [ 2 ]

0 голосов
/ 13 июня 2019

Обновление элементов BottomTabs невозможно в v1, но должно быть возможно в v2.

Даже если вы используете v1, решил выложить решение для v2: 

Navigation.mergeOptions(this.props.componentId, {
  bottomTab: {
    color: 'red',
    icon: require('./someOtherIcon.png')
  }
});

Где this.props.compoenntId - идентификатор компонента вашего корневого экрана. При объявлении макета вы можете задать заранее заданные идентификаторы экранов и использовать этот предопределенный идентификатор.

0 голосов
/ 31 мая 2019

Добавление компонента TabIcon в навигацию. Параметр createBottomTabNavigator использует избыточный или контекстный API для изменения состояния TabIconComponent. 

 navigationOptions: ({ navigation }) => ({
  tabBarIcon: ({ tintColor }) => {// eslint-disable-line

    const { routeName } = navigation.state;
    let iconName;
    if (routeName === 'Home') iconName = 'home';
    else if (routeName === 'Notifications') iconName = 'notifications';
    else if (routeName === 'Readout') iconName = 'readout';
    else if (routeName === 'Inbox') iconName = 'messages';
    else if (routeName === 'Profile') iconName = 'profile';

    return <TabIcons iconName={iconName} tintColor={tintColor} />;
  },
  tabBarVisible: true,
}),
...