React Native Progress View iOS 不重新渲染

Question

我正在用 React Native 和 REDUX 構建一個應用程序。 我在 React Native 中使用 Progress View iOS 來顯示一個非常簡單的原生進度條。 這是代碼：

renderProgressBar() {
    if(!!Platform.OS) {
        switch(Platform.OS) {
            case 'ios':
                return (
                    <ProgressViewIOS
                        progress={(this.props.backgroundData.percentageLoaded || 0)}
                        progressTintColor={globalProgressBarTintColor}
                        trackTintColor={globalProgressBarEmptyTrackTintColor} />
                );

            case 'android':
                return (
                    <ProgressBarAndroid
                        color={globalProgressBarTintColor}
                        progress={(this.props.backgroundData.percentageLoaded || 0)} />
                );

            default:
                return null;
        }

    } else {
        return null;
    }
}

我已經在它的 REDUX 容器以及視圖本身的渲染方法中暫停了應用程序，我 100% 肯定所有的進度值都很好。 它們從我的容器中的減速器中出現，並被傳遞到視圖中。 它們也出現在所有渲染方法中。 它們是 0、0.2、0.4、0.666666601、0.8 和 1。

所以我要說的是this.props.backgroundData.percentageLoaded將等於我剛剛提到的這些值。 我可以暫停它並看到該值肯定存在並且它是一個數字而不是一個字符串所以一切都應該很好。 出於某種原因，即使渲染了 5 次，也沒有顯示任何內容。

它並不落后於其他東西（就 UI 堆棧而言），因為我已將進度值設置為 1，並將欄中的顏色設置為紅色和藍色，並且顯示正常。 如果我保留那些瘋狂的紅色/藍色並將進度設置為我上面提到的所有這些值，它們都可以單獨工作（硬編碼而不是動態道具值）。

如果有人想知道我使用的唯一 React Native 生命周期方法是渲染，它看起來像這樣：

render() {
    this.titleWidth = this.props.deviceWidth / 2;

    return (
        <View>
            <View style={[
                            styles.navbar,
                            {
                                width: this.props.deviceWidth,
                                justifyContent: (this.props.showBackIcon === false && this.props.showingTitle === false) ? 'flex-end' : 'space-between',
                            }
                        ]}>

                { this.props.showBackIcon ? this.renderBackButton() : null }

                { this.props.showingTitle ? this.renderTitle() : null }

                { this.props.showingIcon ? this.renderRightIconButton() : null }

                { this.props.showingTextButton ? this.renderRightTextButton() : null }

            </View>

            { this.renderProgressBar() }
        </View>
    );  
}

我難住了。 有人想嗎？ 謝謝。

編輯：另外，如果有幫助，這里是作為道具發送的容器代碼：

const mapStateToProps = (state, props) => {
    return {
        ...safelyBuildPassProps(state.navigation.route.passProps),
        deviceHeight: state.appSettings.deviceOrientation.currDeviceHeight,
        deviceWidth: state.appSettings.deviceOrientation.currDeviceWidth,
        backgroundData: {
            loadingData: state.appSettings.loadingBackgroundData,
            percentageLoaded: state.appSettings.loadingBackgroundDataPercent,
        },
    }
}

第二次編輯

我應該解釋一下，這都是基於 ASync 調用和轉換的。 所有流程都發生在客戶端（設備）中，流程如下：

• 使用 fetch 調用后端
• 獲取具有成功狀態的響應對象並發送到建模服務
• 建模服務（它是一個本地 ASync 函數）清理響應對象並轉換為帶有顏色等的正確 UI 結果
• 遍歷響應對象數組后，將 100 除以數組長度，然后再除以 100 以獲得要使用的ProgressViewIOS的十進制值。
• 在完成每個對象的轉換后立即發送百分比
• Dispatch 在進度條所在的導航欄上調用 rerender 並將新的百分比傳遞給它，如上面的代碼所示。
• 重新渲染發生（我在這里暫停它以查看它返回正確的 JSX 對象和百分比）但設備屏幕上的任何內容都沒有變化

Answer 1

這里的問題是我試圖在不到一秒的時間內更新進度條大約 20 次。 有一個進度條來查看數據處理的進度是很棒的，但是......如果整個轉換發生在一秒鍾內......你可能不需要進度條。

一旦我在那里添加了更多時間，進度條就有時間更新了。