React Native 手势处理程序不适用于 Android 中的模态

Question

PanGestureHandler我在使用from react-native-gesture-handlerwith时遇到问题Modal。这在 中完美运行iOS，但在android. 此外，当我更改Modal为组件时，它也View可以正常工作。Android请任何人都可以建议我解决这个问题。

class Circle extends Component {
  _touchX = new Animated.Value(windowWidth / 2 - circleRadius);
  _onPanGestureEvent = Animated.event([{ nativeEvent: { x: this._touchX } }], { useNativeDriver: true });
  render() {
    return (
      <Modal
        isVisible={true}
      >
        <PanGestureHandler
          onGestureEvent={this._onPanGestureEvent}>
          <Animated.View style={{
            height: 150,
            justifyContent: 'center',
          }}>
            <Animated.View
              style={[{
                backgroundColor: '#42a5f5', borderRadius: circleRadius, height: circleRadius * 2, width: circleRadius * 2,
              }, {
                transform: [{ translateX: Animated.add(this._touchX, new Animated.Value(-circleRadius)) }]
              }]}
            />
          </Animated.View>
        </PanGestureHandler>
      </Modal>
    );
  }
}

Answer 1

您可以使用GestureHandlerRootView

 import { GestureHandlerRootView } from "react-native-gesture-handler";

 <Modal>
    <GestureHandlerRootView style={{flex:1}}>
        <myGestureEnabledComponent/>
    </GestureHandlerRootView>
</Modal>

如果您在组件库中使用手势处理程序，您可能需要将库的代码包装在 GestureHandlerRootView 组件中。这将避免用户在 MainActivity.java 中进行额外配置。 来源

react-native-modal 中的相关问题