检查PanResponder值是否超过视图宽度

Question

I am creating a PanResponder in my componentWillMount method

componentWillMount() {
  this._panResponder = PanResponder.create({
    onMoveShouldSetResponderCapture: () => true,

    onMoveShouldSetPanResponderCapture: () => true,

    onPanResponderMove: Animated.event([null, { dx: this.state.pan }]),

    onPanResponderRelease: (e, {vx, vy}) => {
      // here I want to check if pan exceeded the width of the View container
    ]
  });
}

The problem is that I don't know how to detect the size of the width.

In my render method, I could do something like this

return (
  <View onLayout={event => this.setState({ viewWidth: event.nativeEvent.layout.width })}>
    ..
  </View>
);

but I cannot access this.state.viewWidth in componentWillMount , since the method is only rendered before the view is mounted.

I am trying to make a slider that goes from left to right, so I need a minimum and maximum X value, where the minimum X value is simply 0.

So when defining the position, I am using

// Current position
const left = pan.interpolate({
  inputRange: [0, viewWidth],
  outputRange: [0, viewWidth],
  extrapolate: 'clamp'
});

return (
  <View style={styles.container}>
    <View style={{ position: 'absolute', left, width: 100, height: 100 , backgroundColor: 'red' }} />
  </View>
);

but maybe it could be done differently with 0 and 1 as values, so I in onPanResponderRelease could simply check if the pan value exceeds 1 ?

Answer 1

I would initialize the viewWidth state to false , and use componentDidUpdate to initialize the PanResponder . Just check that state.viewWidth is set and that it wasn't in prevState.viewWidth :

componentDidUpdate(prevProps, prevState) {
    if (this.state.viewWidth && prevState.viewWidth === false) {
        this._panResponder = PanResponder.create({
        onMoveShouldSetResponderCapture: () => true,

        onMoveShouldSetPanResponderCapture: () => true,

        onPanResponderMove: Animated.event([null, { dx: this.state.pan }]),

        onPanResponderRelease: (e, {vx, vy}) => {
          // here I want to check if pan exceeded the width of the View container
        });
    }
}