1

我在使用PanGestureHandlerfrom 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>
    );
  }
}
4

2 回答 2

3

您可以使用GestureHandlerRootView

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

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

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

react-native-modal 中的相关问题

于 2021-03-07T13:39:59.830 回答
1

这是来自关于Android 和手势处理程序的文档的引用：react-native-gesture-handlerModal

Usage with modals on Android#
On Android RNGH does not work by default because modals are not located under React Native Root view in native hierarchy. In order to make it workable, components need to be wrapped with gestureHandlerRootHOC (it's no-op on iOS and web).

E.g.

const ExampleWithHoc = gestureHandlerRootHOC(function GestureExample() {
  return (
    <View>
      <DraggableBox />
    </View>
  );
});

export default function Example() {
  return (
    <Modal animationType="slide" transparent={false}>
      <ExampleWithHoc />
    </Modal>
  );
}

但我没有尝试上面的代码。

于 2020-08-05T05:29:51.717 回答