React Native 进度视图 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 并将栏中的颜色设置为红色和蓝色，它显示正常。如果我保留那些疯狂的 red/blue 颜色并将进度设置为我上面提到的所有这些值，它们都会单独工作（硬编码而不是动态道具值）。

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

第二次编辑

我应该多解释一下，这都是基于异步调用和转换的。所有过程都发生在客户端（设备）中，这些过程是：

使用 fetch 调用后端
获取具有成功状态的响应对象并发送到建模服务
建模服务（这是一个本地 ASync 函数）清理响应对象并转换为正确的 UI 结果以及颜色和诸如此类的东西
遍历响应对象数组后，将 100 除以数组长度，然后再除以 100 以获得供 ProgressViewIOS 使用的十进制值。
在完成每个对象的转换后调度百分比
Dispatch 在进度条所在的导航栏上调用重新呈现，并将新的百分比传递给它，如上面的代码所示。
重新渲染发生（我在这里暂停它以查看它返回正确的 JSX 对象和百分比）但设备屏幕上没有任何变化

Answer 1

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

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

React Native 进度视图 iOS 不重新渲染

React Native Progress View iOS Doesn't Rerender

javascript

jsx

reactjs

react-jsx

react-native