Question

我正在PanResponder方法

中创建componentWillMount

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
    ]
  });
}

问题是我不知道如何检测宽度的大小。

在我的render方法中，我可以做这样的事情

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

但我无法访问this.state.viewWidth中的componentWillMount，因为该方法仅在安装视图之前呈现。

我正在尝试制作一个从左到右的滑块，所以我需要一个最小和最大X值，其中最小X值只是0。

因此，在定义职位时，我正在使用

// 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>
);

但也许可以通过0和1作为值进行不同的操作，因此我onPanResponderRelease只需检查pan值是否超过1 ？

Answer 1

我会将viewWidth州初始化为false，并使用componentDidUpdate初始化PanResponder。只需检查state.viewWidth是否已设置，并且prevState.viewWidth中没有{<1}}：

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
        });
    }
}

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

1 个答案: