如何在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来显示是否有通知，然后显示为钟形图标或显示正常的钟形。

下面的Chck代码：

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

希望能有所帮助。无需怀疑