Question

我试图在React Native中从navigationOptions动态更改tabNavigator的徽章。

我正在尝试使用setState进行更改，但它没有更新。

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      postsBadgeCount: 0,
      progressBadgeCount: 0
    };

    this.Apps = this.startApp();
  }

  componentDidMount() {
    setInterval(() => {
      this.setState({ progressBadgeCount: this.state.progressBadgeCount + 1 });
      console.log('change state', this.state.progressBadgeCount);
    }, 5000);
  }

  startApp() {
    const BottomNav = createMaterialBottomTabNavigator({ 
      Progress: {
        screen: stack2,
        navigationOptions: { 
          tabBarLabel: 'Progress',
          tabBarIcon: ({ tintColor }) => (
            <View>
              <IconFA name="calendar-check-o" size={22} color={tintColor} /> 
              {this.state.progressBadgeCount > 0 ?
              <View style={style.badge}>
                <Text style={style.badgeCount}>1</Text>
              </View> : undefined}
            </View> 
          )
        }
      },
    {
      ...
    });

    const navigator = createSwitchNavigator(
      ...
    );

    return createAppContainer(navigator);
  }

  render() {
    return (
      <this.Apps/> 
    );
  }
}

当我尝试使用setState更新progressBadgeCount时，它在UI上没有改变。

在这种情况下，有关如何更新徽章计数的任何建议？谢谢

Answer 1

startApp()在构造函数中仅运行一次。您可以将this.Apps更改为：

，而不是将其保存到render()中。

render() {
  return this.startApp();
}

这样，它在每次重新渲染时都运行startApp()。

使用状态更新NavigationOptions中的tabBarIcon，不起作用

1 个答案: