在 react-native-navigation 中，如何在不导航的情况下更新选定的标签栏图标？

Question

基于屏幕上的操作，我想更新所选选项卡的图标（具体来说，代表 "unread count" 的图标上的徽章装饰器）而无需导航以导致重新呈现。有哪些方法可以做到这一点？

这是使用 tabs template of expo init and then modifying to demonstrate: https://github.com/kevgrig/rn_navigation_badge_updates

问题的基本演示的源代码

这是该回购协议的摘要：https://snack.expo.io/@git/github.com/kevgrig/rn_navigation_badge_updates

关键位是：

navigation/MainTabNavigator.js 中的 createBottomTabNavigator 和 tabBarIcon 那个 return 一个 <TabBarIcon /> 组件并传递一个 badgeCount参数

let homeTabCount = 1;
HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => {
    return (
      <TabBarIcon
        focused={focused}
        name={
          Platform.OS === 'ios'
            ? `ios-information-circle${focused ? '' : '-outline'}`
            : 'md-information-circle'
        }
        badgeCount={homeTabCount}
      />
    );
  },
};

components/TabBarIcon.js 中的 TabBarIcon 组件带有可选的 badgeCount 参数。

export default class TabBarIcon extends React.Component {
  render() {
    const { name, focused, badgeCount } = this.props;

    return (
      <View style={badgeStyles.badgeView}>
        <Ionicons
          name={name}
          size={26}
          style={{ marginBottom: -3 }}
          color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
        />
        { badgeCount > 0 && (
          <View style={badgeStyles.badgeContainer}>
            <Text style={badgeStyles.badgeText}>{badgeCount}</Text>
          </View>
        )}
      </View>
    );
  }
}

screens/HomeScreen.js 中主屏幕上的 Button 带有一个 onPress 处理程序，我想用它来更新 badgeCount主屏幕选项卡。
```
export default class HomeScreen extends React.Component {

  onPress = () => {
    // TODO - how to update the badgeCount?
  }
```

我调试了 props.navigation 的可用方法并看到 emit('refocus') 但那没有用。

Answer 1

我用 react-redux 完成了这个。大致是这样的：

import { createStore, applyMiddleware } from 'redux';

import { connect, Provider } from 'react-redux';

const defaultState = {
  badgeCount: 0,
};

const ACTION_REFRESH_STATE = "ACTION_REFRESH_STATE";

function rootReducer(state = defaultState, action) {
  switch (action.type) {
    case ACTION_REFRESH_STATE:
      const result = Object.assign({}, state);
      if (action.new_state.badgeCount) {
        result.badgeCount = action.new_state.badgeCount;
      }
      return result;
    default:
      return state;
  }
}

function refreshState(new_state) {
  return {
    type: ACTION_REFRESH_STATE,
    new_state: new_state,
  };
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    refreshState: (new_state) => {
      dispatch(refreshState(new_state));
    }
  }
};

const store = createStore(rootReducer);

function routeToIcon(routeName) {
  if (routeName.startsWith("Home")) {
    return { iconName: "md-home", mapStateToProps: state => ({ badgeCount: state.badgeCount }) };
  } [...]
}

[...]
    tabBarIcon: ({ focused, horizontal, tintColor }) => {
      const { iconName, mapStateToProps } = routeToIcon(navigation.state.routeName);
      let IconWithBadgeContainer = connect(mapStateToProps, mapDispatchToProps)(IconWithBadge);
      return <IconWithBadgeContainer name={iconName} size={25} color={tintColor} />;
    },
[...]

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <AppContainer
          ref={navigatorRef => {
            globalNavigatorRef = navigatorRef;
          }}
        />
      </Provider>
    );
  }
}

在 react-native-navigation 中，如何在不导航的情况下更新选定的标签栏图标？

In react-native-navigation, how do I update a selected tab bar icon without navigating?

react-native-navigation