установить цвет значка вкладки в react-native-navigation

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

Шаги по воспроизведению / Фрагменты кода / Скриншоты

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

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

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


react-native-navigation wix-react-native-navigation
person Nicoara Talpes    schedule 31.05.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

Несмотря на то, что вы используете v1, я решил опубликовать решение для v2:

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

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

person guy.gc    schedule 13.06.2019

arrow_upward
-1
arrow_downward

Добавьте компонент TabIcon в navigationOption для 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,
}),
person Aurangzaib Rana    schedule 31.05.2019
comment
спасибо за попытку ответить, но это вопрос о библиотеке react-native-navigation от Wix, и ваше решение, похоже, находится в другой библиотеке: react-navigation. - person Nicoara Talpes; 13.06.2019