React-native-gesture-handler 与 react-native-slider 相结合答案

【问题标题】：React-native-gesture-handler combined with a react-native-sliderReact-native-gesture-handler 与 react-native-slider 相结合
【发布时间】：2019-12-28 07:33:00
【问题描述】：

我正在使用 react-native-reanimated 库和 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>
);

}

}

【问题讨论】：

标签： react-native

【解决方案1】：

this.Z 是一个动画对象，所以我忘了用正确的方法给它分配一个新值：

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

【讨论】：