我正在 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 对象和百分比),但设备中的屏幕上没有任何变化
最佳答案
这里的问题是我试图在不到一秒的时间内更新进度条大约 20 次。很高兴有一个进度条来查看数据处理的进度,但是...如果整个转换发生在不到一秒的时间内...您可能不需要进度条。
一旦我在那里添加了更多时间,进度条就有时间更新了。
关于javascript - React Native 进度 View iOS 不重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39472163/