react-native - 当 redux 状态改变时改变 tabBarIcon

Question

我在下面定义navigationOptions了App.js这样的流程：

应用程序.js

const intimationsFlow = createStackNavigator({
  Feed: FeedContainer,
  Edit: EditContainer
});

intimationsFlow.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0)
    tabBarVisible = false;

  return {
    title: '',
    tabBarIcon: ({ focused }) => {
      const { pushNotificationSeen } = store.getState();
      console.log('pushNotificationSeen', pushNotificationSeen);

      let i;
      if(pushNotificationSeen) {
        if (focused) {
          i = <FontAwesomeIcon icon={'bell'} size={29} color={'#3780BE'} />
        } else {
          i = <FontAwesomeIcon icon={'bell'} size={29} color={'#393939'} />
        }
      } else {
        if (focused) {
          updatePushNotificationSeen(true);
          i = <FontAwesomeIcon icon={'bell'} size={29} color={'#3780BE'} />
        } else {
          i = <><FontAwesomeIcon icon={'bell'} size={29} color={'#393939'} /><Badge status="error" badgeStyle={{ position: 'absolute', top: -26, right: -13 }} /></>
        }
      }

      return i;
    },
    tabBarVisible
  };
};

const AppNavigator = createSwitchNavigator({
  ResolveAuth: ResolveAuthScreen,
  mainFlow
});

const App = createAppContainer(AppNavigator);

export default () => {
  return <Provider store={store}>
    <SafeAreaProvider>
      <App ref={navigatorRef => { setTopLevelNavigator(navigatorRef) }} />
    </SafeAreaProvider>
  </Provider>
}; 

我想根据是否已经看到推送通知来更新 tabBarIcon 。如果尚未看到推送通知，那么我会显示一个徽章。

这里的问题是我只能在标签栏上有活动时才能获取状态。但我想要的是，每当pushNotificationSeen更新状态时，应该重新渲染 tarBarIcon。

请建议是否可能，否则如何实现。谢谢。

标签： react-nativereact-redux

Answer 1

您必须在 componentWillReceiveProps 处收听减速器中的推送通知更改

class YourComponent extends React.Component {
    {...}
    static navigationOptions = {
        title: ({ state }) => `there is ${state.params && state.params.pushNotificationSeen ? state.params.pushNotificationSeen : ''}`,
        {...}
    }
    {...}
    componentWillReceiveProps(nextProps) {
        if (nextProps.pushNotificationSeen) {
            this.props.navigation.setParams({ pushNotificationSeen });
        }
    }
}

const connectedSuperMan = connect(state => ({ pushNotificationSeen: state.ReducerYo.pushNotificationSeen }))(YourComponent);