React Native：更改后TabView不重新呈現

Question

我試圖動態更改TabView的內容。 基本上，當用戶打開應用程序時，屏幕將獲取用戶帳戶並為用戶擁有的每種不同的貨幣呈現一個選項卡。 （因此，如果用戶有10個USD帳戶，則只會顯示“ USD”標簽，但是如果他有1 USD和1 EUR帳戶，則會顯示“ USD”和“ EUR”標簽）。

當用戶打開應用程序時，一切正常，但是當用戶創建或刪除帳戶時，TabView不會更新，並且會顯示舊狀態，或者如果新狀態的貨幣數量少於先前的狀態，崩潰。

 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;
      }, {});
  }

錯誤

TypeError: scenes[route.key] is not a function

我嘗試過的事情（我使用了SceneMap）

• https://github.com/react-native-community/react-native-tab-view/issues/17
• https://github.com/react-native-community/react-native-tab-view/issues/357

Answer 1

最終，導航狀態沒有更新，我需要使用最新的路線對其進行更新，這應該在React Component生命周期中正確完成，但現在僅手動設置this.state.routes = this._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}
      />
    );
  }