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