Question

我正在使用react-native-reanimated lib和react-native-gesture-handler来缩放屏幕上的某些元素。我在其共享的父组件内添加了react-native-slider，以提供一些额外的帮助（如果项目太小，很难捏住它）。我可以先捏住元素然后滑动它，但是再也不能回到pinchGestureHandler了，图像只能通过滑块缩放。

Export default class Zoomable extends Component {

constructor(props) {
super(props);

this.zoomableItem = props.zoomableItem;
this.Z = new Value(1);
const offsetZ = new Value(1*this.moveableItem.lastScale);

this.handleZoom = event([
  {
    nativeEvent: ({ scale: z, state }) =>
      block([
        cond(eq(state, State.ACTIVE), set(this.Z, multiply(z, offsetZ))),
        cond(eq(state, State.END), [set(offsetZ, multiply(offsetZ, z))]),
      ]),
  },
]);

}

componentDidUpdate(){

props.slider.value ? this.Z = props.slider.value : null

}


render() {

return (

  <Animated.View style={[Styles.container,{transform: [{ scale: this.Z }] } ]}>      
        <PinchGestureHandler
          ref={this.pinchRef}
          onGestureEvent={this.handleZoom}
          onHandlerStateChange={this.handleZoom}>
          <Animated.Image style={Styles.image} source={{ uri: '' }}/>       
        </PinchGestureHandler>
   </Animated.View>
);

}

}

Answer 1

this.Z 是一个动画对象，所以我忘记使用适当的方法为其分配新值：

this.Z.setValue(props.slider.value)

react-native-gesture-handler结合了react-native-slider

1 个答案: