react-native - 反应原生改变 Animated.Image 源而不闪烁
问题描述
当组件中任何图像的源发生变化时,我会尽量避免出现闪烁。
为此,我搜索并决定使用 ref(直接操作)
但它并没有改变任何东西,所以我使用传统方式,改变状态中的 url 属性,它可以工作但会发生闪烁。
更改图像源,当图像开始移动时触发;("onPanResponderStart") 函数。这是代码;
onPanResponderStart:(e, gesture)=>{
//not change image!
// this.refs['refTabure'].setNativeProps({
// source: require('../newImage.png')
// });
//it works, but blink occurs
this.setState({tabureSagImageUrl:require('../newImage.png')})
},
...
return (
<View style={styles.TabureStyle}>
<Animated.Image ref="refTabure" style={[panStyle, styles[this.props.Name], {opacity:this.state.opacity}]}
{...this.panResponder.panHandlers}
source={this.state.tabureSagImageUrl}>
</Animated.Image>
</View>
);
如何在不重新渲染导致闪烁的组件的情况下编辑图像源?
解决方案
推荐阅读
- python - 在数据框中返回为 set() 的空集,如何返回为 None 或 NULL?
- c++ - 复制构造函数参数为 0
- jupyter-notebook - 有没有办法将 Jupyter Notebook 中单元格的实时输出打印到 MacBook Touch Bar?
- drake - 时变线性二次调节器查询
- linux-kernel - NFS 挂载超时
- docker - 通过特定物理接口的 docker 网络
- python - 在 python 中重塑一个奇怪的列表
- android - 如何验证 APK 上的签名证书是否与 SHA256 指纹匹配?
- angular - 来自另一个 URL 的 Http 发布到 Angular 6 应用程序
- java - UTF-8 字符编码不适用于 Spring Boot