如何在 React Native 的通知上设置动态标签栏图标？

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

我就是这样实现动态标签栏图标的：

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，我为聚焦和非聚焦图标编写了如下代码：

// 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，它基本上使用 redux 来显示是否有通知，然后显示为铃铛图标或显示正常铃铛。

检查下面的代码：

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);

希望对您有所帮助。有疑问请随意

如何在 React Native 的通知上设置动态标签栏图标？

how to set dynamic tab bar icon on notification in react native?

react-native

react-native-firebase