如何在支持 3d 触摸（强制触摸）的设备上使 TouchableOpacity 或 TouchableHighlight 可点击

Question

我有这个代码：

<View {...this.panGesture.panHandlers}>
    <Animated.View>

        <View style={{ position: 'absolute' }}>
            <TouchableHighlight onPress={ () => {console.log('hello')}>
            </TouchableHighlight>
        </View>

    </Animated.View>
</View>

我不能为了我的爱让 onPress 在 iPhone 6s 及更高版本上工作，启用 3d touch 时。

我尝试了大多数建议的解决方案 here，但没有成功。

如果有任何帮助，我将不胜感激！

Answer 1

我已经能够通过确保父级 PanResponder 不会在移动时抓住响应器来解决这个特定问题，直到触摸实际上已经从原点移动：

PanResponder.create({

  //... other responder callbacks

  onMoveShouldSetPanResponder(e, gestureState) {
    if (gestureState.dx === 0 || gestureState.dy === 0) {
      return false;
    }
    return true;
  }
});

这是在 React Native 0.10 天左右回来的，从那以后就没有尝试过。希望对您有所帮助！

Answer 2

好吧，在摆弄了很多之后，我意识到解决方案部分是 jevakallio 所说的但是当启用 3D 触摸时我不能再使用 Touchables 所以我必须手动重现它们的行为。

我的代码现在看起来像这样： child代码：

let touchable;

if (View.forceTouchAvailable === false) { // if 3d touch is disabled
    // just use a Touchable and all should be fine.
    touchable = (<TouchableHighlight
        onPress={ () => {console.log('hello world');}
        style={this.props.style}
        underlayColor={this.props.highlightBgColor}
    >
        {this.props.children}
    </TouchableHighlight>);
} else { // Otherwise if 3D touch is enabled
    // we'll have to use a child view WITH a PanResponder
    touchable = (<View
      style={[this.props.style, {
        backgroundColor: this.state.panViewIsTapped ?
          this.props.highlightBgColor
          :
          bgColor,
      }]}
      {...this.panResponderChild.panHandlers}
    >
      {this.props.children}
    </View>);
}

return (<View {...this.panResponderParent.panHandlers}>
    <Animated.View>

        <View style={{ position: 'absolute' }}>
            {touchable}
        </View>

    </Animated.View>
</View>);

child泛响应器代码(this.panResponderChild):

this.panResponderChild = PanResponder.create({

        // true because we want tapping on this to set it as the responder
        onStartShouldSetPanResponder: () => true,

        // true because we want this to capture the responder lock from it's parent on start
        onStartShouldSetPanResponderCapture: () => true,

        // when the pan responder lock is terminated, set the pan view as NOT tapped
        onPanResponderTerminate: () => {
          this.setState({ panViewIsTapped: false });
        },

        // true so that the parent can grab our responder lock if he wan'ts to.
        onPanResponderTerminationRequest: () => true,

        // false because we DON'T want this btn capturing the resp lock from it's parent on move
        onMoveShouldSetPanResponderCapture: () => false,

        // false because we DON'T want moving the finger on this to set it as the responder
        onMoveShouldSetPanResponder: () => false,

        onPanResponderGrant: () => {
          this.setState({ panViewIsTapped: true });
        },

        onPanResponderRelease: () => {
          this.setState({ panViewIsTapped: false });
          console.log('hello world');
        },
})

parent泛响应器代码(this.panResponderParent):

this.panResponderParent = PanResponder.create({

      // true because we want tapping on the cal, to set it as a responder
      onStartShouldSetPanResponder: () => true,

      // false because we DON'T want to grab the responder lock from our children on start
      onStartShouldSetPanResponderCapture: () => false,

      /*
      onMoveShouldSetPanResponderCapture:
        false because we don't want to accidentally grab the responder lock from
        our children on movement.
          That's because sometimes even a small tap contains movement,
          and thus a big percentage of taps will not work.
          Keeping that flag false does not nessecarily mean that our children will
         always capture the responder lock on movement, (they can if they want),
         we're just not strict enough to grab it from them.
      */
      onMoveShouldSetPanResponderCapture: () => false,

      /*
      onMoveShouldSetPanResponder:
        We DO want moving the finter on the cal, to set it as a responder,
        BUT, we don't always want moving the finger on an appointment setting this parent
        as the responder.

        Logic:
        So, when the dx AND dy of the pan are 0, we return false, because we don't
        want to grab the responder from our appointment children.

        For anything other than that we just allow this parent to become the responder.

        (dx, dy: accumulated distance of the gesture since the touch started)
      */
      onMoveShouldSetPanResponder: (e, gestureState) =>
        !(gestureState.dx === 0 || gestureState.dy === 0),


    });

如何在支持 3d 触摸（强制触摸）的设备上使 TouchableOpacity 或 TouchableHighlight 可点击

How to make a TouchableOpacity or TouchableHighlight clickable on devices that support 3d touch (force touch)

ios

react-native

react-native-ios

touchableopacity

touchablehighlight