Javascript 反应本机：选项卡视图更改后不重新呈现

我正在尝试动态更改选项卡视图的内容。基本上，当用户打开应用程序时，屏幕将获取用户帐户并为用户拥有的每种不同货币呈现一个选项卡。（因此，如果用户有10个美元帐户，则只显示一个美元选项卡，但如果用户有1个美元和1个欧元帐户，则显示一个美元和一个欧元选项卡）

当用户打开应用程序时，一切正常，但是当他创建或删除帐户时，选项卡视图不会更新，并且显示旧状态，或者如果新状态的货币数小于以前的状态，则会崩溃

 private _renderCardsTabs = () => {
    const { accounts: { accounts } } = this.props;
    console.log("debug _renderCardTabs", accounts)

    if (accounts.length === 0 || accounts.length < 1) {
      return this._renderEmptyCardsTabs();
    }

    let scenes = this._renderTabs()

    return (
      <TabView
        navigationState={this.state}
        renderTabBar={this._renderTabBar}
        renderScene={({ route }) => {
          return scenes[route.key]()
        }}
        onIndexChange={this._tabHandler}
      />
    );
  }

      private _renderTabBar = (props) => {
    return (
      <View style={styles.tabBarWrapper}>
        <TabBar
          {...props}
          indicatorStyle={styles.indicator}
          style={styles.tabBar}
          labelStyle={styles.label}
          scrollEnabled={false}
          pressOpacity={1}
        />
      </View>
    )

      private _renderTabs = () => {
    const { accounts: { accounts } } = this.props;

    return [...new Set(accounts.map((account: any) => account.currency_symbol.split('-')[1].toLowerCase()))]
      .reduce((acc, item) => {
        acc[item] = () => {
          const { navigation } = this.props;
          return <CardsScreen navigation={navigation} currency={item.toUpperCase()} />;
        };
        return acc;
      }, {});
  }

我尝试过的东西（我使用了SceneMap）

---

结果是导航状态没有更新，我需要用最新的路线对其进行更新，这应该在React组件的生命周期中正确完成，但现在只需手动设置它，使用

this.state.routes=this.\u getRoutes（）

解决了这个问题

 private _renderCardsTabs = () => {
    const { accounts: { accounts } } = this.props;

    if (accounts.length === 0 || accounts.length < 1) {
      return this._renderEmptyCardsTabs();
    }

    let scenes = this._renderTabs()
    // This should not go here but it works, I need to update this.state after accounts
    // are updated by sagas from somewhere that doesn't cause a rerender 
    this.state.routes = this._getRoutes()

    return (
      <TabView
        navigationState={this.state}
        renderTabBar={this._renderTabBar}
        renderScene={({ route }) => {
          return scenes[route.key]()
        }}
        onIndexChange={this._tabHandler}
      />
    );
  }

private\u renderCardsTabs=（）=>{
const{accounts:{accounts}}=this.props；
如果（accounts.length==0 | | accounts.length<1）{
返回此项。_renderEmptyCardsTabs（）；
}
让场景=这个
//这不应该在这里，但它的工作，我需要更新这个。帐户后的状态
//由传奇故事从不会引起重播的地方更新
this.state.routes=this.\u getRoutes（）
返回(
{
返回场景[route.key]（）
}}
onIndexChange={this.\u tabHandler}
/>
);
}

 private _renderCardsTabs = () => {
    const { accounts: { accounts } } = this.props;

    if (accounts.length === 0 || accounts.length < 1) {
      return this._renderEmptyCardsTabs();
    }

    let scenes = this._renderTabs()
    // This should not go here but it works, I need to update this.state after accounts
    // are updated by sagas from somewhere that doesn't cause a rerender 
    this.state.routes = this._getRoutes()

    return (
      <TabView
        navigationState={this.state}
        renderTabBar={this._renderTabBar}
        renderScene={({ route }) => {
          return scenes[route.key]()
        }}
        onIndexChange={this._tabHandler}
      />
    );
  }