Как установить Dynami c значок панели вкладок на уведомления в реагировать родной?

Question

Я хочу изменить значок панели вкладок при получении уведомлений.

   * */
    this.messageListener = firebase.messaging().onMessage(async message => {
      //process data message

      console.log(JSON.stringify(message));
      const isNewActivyty = await AsyncStorage.setItem('isNewActivity', 'true');
    });

Это мой код onMessage.

Когда я получаю любое сообщение, я хочу изменить значок панели вкладок. Такие, как уведомления в Instagram.

Как вы можете видеть выше, я пытался использовать AsyncStorge для хранения этой информации, но она, похоже, не работала.

 Feed: {
      screen: Feed,
      navigationOptions: {
        tabBarIcon: ({tintColor}) => <FeedIcon color={tintColor} />,
        tabBarOnPress: async props => {
          await props.defaultHandler();
        },
        title: I18n.t('feed'),
      },
    },
    Activity: {
      screen: Activity,
      navigationOptions: {
        tabBarIcon: ({tintColor, focused}) => (
          <ActivityIcon color={tintColor} />
        ),
        tabBarOnPress: async props => {
          await props.defaultHandler();
        },
        title: I18n.t('activity'),
      },
    },

Над кодом это мой createBottomTabNavigator.

Как я могу динамически изменить этот tabBarIcon?

Спасибо!

Answer 1

Вот как я реализовал динамические c значки панели вкладок:

const TabNavigator = createBottomTabNavigator(
  {
    Home: AppStack,
    Notification: Notifications,
    Account: SettingsScreen,
  },
  {
    defaultNavigationOptions: ({navigation}) => ({
      tabBarIcon: ({focused, tintColor}) =>
        getTabBarIcon(navigation, focused, tintColor),
    }),
    tabBarOptions: {
      activeTintColor: colors.tealC,
      inactiveTintColor: 'gray',
      labelStyle: {
        paddingBottom: 3,
      },
      style: card.btmCa,
      tabStyle: {elevation: 6},
    },
  },
);

И для getTabBarIcon ive написанный код, как показано ниже для сфокусированных и не сфокусированных значков, таких как:

// this function gives the icons when tab is selected
const getTabBarIcon = (navigation, focused, tintColor) => {
  const {routeName} = navigation.state;
  if (routeName === 'Home') {
    if (focused) {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/homeF.png')}
        />
      );
    } else {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/homeNFS.png')}
        />
      );
    }
  }

  if (routeName === 'Notification') {
    if (focused) {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/notifIconS.png')}
        />
      );
    } else {
      // console.log(props, 'props');
      return (
        // <Image
        //   style={homeStyles.bottomTabI}
        //   source={require('./app/assets/images/bellNF.png')}
        // />
        <BellIcon />
      );
    }
  }

  if (routeName === 'Account') {
    if (focused) {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/accountS.png')}
        />
      );
    } else {
      return (
        <Image
          style={homeStyles.bottomTabI}
          source={require('./app/assets/images/profileNF.png')}
        />
      );
    }
  }
};

А теперь для уведомлений вы можете видеть, что я использовал пользовательский компонент Bellicon, который в основном использует избыточность, чтобы показать, есть ли уведомления, затем показать как значок колокольчика или показать обычный колокол.

Код чка ниже:

class BellIcon extends Component {

  render() {
    return (
      <View>
        {this.props.notificationReducer.notificationsLength ==
        this.props.notificationReducer.notificationsNewLength
          ? this.collapseView()
          : this.nonNotificationView()}
      </View>
    );
  }
}

const mapStateToProps = state => {
  const {notificationReducer} = state;
  return {notificationReducer};
};


export default connect(mapStateToProps, null)(BellIcon);

Надеюсь, это поможет. не стесняйтесь сомнений