javascript - React Native 进度 View iOS 不重新渲染

Question

我正在 React Native 和 REDUX 中构建一个应用程序。我正在 React Native 中使用 iOS 进度 View 来显示一个非常简单的 native 外观进度条。这是代码:

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 容器以及 View 本身的渲染方法中暂停了应用程序，我 100% 肯定所有进度值都进展顺利。它们从我的容器中的 reducer 中显示出来并传递到 View 中。它们也出现在所有渲染方法中。它们是 0、0.2、0.4、0.666666601、0.8 和 1。

所以我想说的是 this.props.backgroundData.percentageLoaded 将等于我刚才提到的这些值。我可以暂停它并看到该值确实存在，并且它是一个数字而不是字符串，所以一切都应该很好。由于某种原因，即使渲染了 5 次，也没有显示任何内容。

它没有落后于其他东西(就 UI 堆栈而言)，因为我已将进度值设置为 1 并将颜色栏中的颜色设置为红色和蓝色，并且它显示得很好。如果我保留那些疯狂的红/蓝色并将进度设置为我上面提到的所有这些值，它们都会单独工作(硬编码而不是动态 Prop 值)。

如果有人想知道我使用的唯一 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>
    );  
}

我被难住了。有人想吗？谢谢。

编辑:另外，如果它有帮助，这里是作为 props 发送的容器代码:

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,
        },
    }
}

第二次编辑

我应该更多地解释一下，这都是基于异步调用和转换的。所有过程都发生在客户端(设备)中，过程如下:

• 使用 fetch 调用后端
• 获取具有成功状态的响应对象并将其发送到建模服务
• 建模服务(这是一个本地异步函数)清理响应对象并转换为正确的 UI 结果(包括颜色等)
• 迭代响应对象数组后，将 100 除以数组长度，然后再除以 100，以获得要使用的 ProgressViewIOS 的十进制值。
• 在完成每个对象的转换后立即调度百分比
• Dispatch 在进度条所在的导航栏上调用重新渲染，并将新的百分比传递给它，如上面的代码所示。
• 发生了重新渲染(我已在此处暂停它以查看它返回正确的 JSX 对象和百分比)，但设备中的屏幕上没有任何变化

Answer 1

这里的问题是我试图在不到一秒的时间内更新进度条大约 20 次。很高兴有一个进度条来查看数据处理的进度，但是...如果整个转换发生在不到一秒的时间内...您可能不需要进度条。

一旦我在那里添加了更多时间，进度条就有时间更新了。