3

当组件中任何图像的源发生变化时,我会尽量避免出现闪烁。

为此,我搜索并决定使用 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>
          );

如何在不重新渲染导致闪烁的组件的情况下编辑图像源?

4

0 回答 0