Question

我正在使用React Native＆amp; amp; 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％肯定所有进度值都能正常运行。它们从容器中的reducer出现，传递到视图中。它们也出现在所有渲染方法中。它们分别为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>
    );  
}

我很难过。想什么？感谢。

修改此外，如果它有帮助，这里是作为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,
        },
    }
}

第二次修改

我应该解释一下，这完全基于ASync调用和转换。所有过程都发生在客户端（设备）中，过程如下：

使用fetch调用后端
获取成功状态的响应对象并发送给建模服务
建模服务（这是一个本地ASync函数）清理响应对象并转换为适当的UI结果，颜色和诸如此类
迭代响应对象数组后，将100除以数组长度，然后再除以100，得到要使用的ProgressViewIOS的十进制值。
在完成每个对象的转换后立即调度百分比
在进度条所在的导航栏上发送调用重新发送，并将其交给新百分比，如上面的代码所示。
Rerender发生（我暂停了它，看它返回正确的JSX对象和百分比）但屏幕上没有任何内容在设备中发生变化

Answer 1

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

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

React Native Progress View iOS不会重新渲染

1 个答案: