标签: react-native-gesture-handler

标题几乎就是问题。在反应本机按钮上，即 touchableOpacity 上，您具有禁用的道具，但它似乎不适用于 RectButton

<RectButton onPress={onPress} disabled={isDisabled}></RectButton>

不起作用

TL;DR 有谁有任何例子， useAnimatedGestureHandler 的正确泛型是什么？

问题：

我正在关注Reanimated 2 手势动画教程。有这样一个例子：

//...
const onGestureEvent = 
useAnimatedGestureHandler({
  onStart: (_, ctx) => {
    ctx.offsetX = translateX.value
  },
  //...
})
//...

我使用打字稿，当我复制打字稿中的示例时，我得到ctx参数（上下文）类型错误： Property 'offset' does not exist on type '{}'.在 onStart 声明中进行一些窥探后，我发现 GestureHandlers 的完整类型需要一个泛型<T, TContext extends Context>：

//...
export interface GestureHandlers<T, TContext extends Context> {
  onStart?: Handler<T, TContext>;
  //...
}

解决方法：

我可以通过简单地传递一个实用程序类型记录（这几乎与说“任何”相同）来解决这个问题，我不喜欢这样。

const onGestureEvent = useAnimatedGestureHandler<
    GestureEvent<PanGestureHandlerEventPayload>,
    Record<string, unknown>
>({
    onStart: (_, ctx) => {
    ctx.offsetX = translateX.value;
    }, …

使用PanGestureHandlerfrom react-native-gesture-handlerwith react-native-reanimatedwithuseAnimatedGestureHandler会引发此错误。

期望onGestureHandlerEvent侦听器是一个函数，而不是得到一个object类型的值

这些是正在渲染的组件，

<View style={[styles.center]}>
  <Text style={{color: "#555", fontSize:16, marginTop: 120, marginBottom: 70, width: 250, margin: 'auto'}}>Works on the web but throws an error on iOS.</Text>

  <Animated.View style={[styles.box, styles.center, animatedStyle]}>
    <PanGestureHandler onGestureEvent={gestureHandler}>
      <Text style={{color: "#444", fontWeight:'bold', padding: 16,}}>Drag me around</Text>
    </PanGestureHandler>
  </Animated.View>
</View>;

这里的小吃，https://snack.expo.dev/4Mp-PfXPU

在这段由 William Candillon 从http://start-react-native.dev制作的精彩视频中，他展示了如何制作这个离屏菜单。代码可以在这里找到：https://github.com/wcandillon/can-it-be-done-in-react-native/tree/master/the-10-min/src/Menu

我的问题是，是否可以创建一个可以以编程方式关闭个人资料屏幕的功能，而不是用户在个人资料卡上滑动。最好是随着动画结束，但 B 计划可能只是优雅地将动画状态返回到起始点。如果有一个能够伪造滑动的通用函数就太棒了。

提前致谢！

我正在使用PanGestureHandler和PinchGestureHandler来允许在屏幕上平移和放大/缩小大图像。但是，一旦引入缩放变换，平移的行为就会有所不同。

我通过此实施实现了三个目标：

1. 我试图在首次加载视图时缩小图像以适应特定高度。这样用户就可以看到尽可能多的图像。如果仅对图像应用缩放变换，则 的平移值0不会将图像置于左上角（由于缩放原点居中）。
2. 我试图做到这一点，以便当有人使用捏合手势进行缩放时，平移值也会进行调整，以使缩放原点看起来好像位于用户发起手势的位置（React Native 目前仅支持尺度变换的中心原点）。为了实现这一点，我假设我需要在用户缩放时调整平移值（如果比例不是1）。
3. 缩放后平移时，我希望平移通过调整与缩放比例相关的平移值来跟踪用户的手指（而不是移动得更快/更慢）。

这是我到目前为止所拥有的：

import React, { useRef, useCallback } from 'react';
import { StyleSheet, Animated, View, LayoutChangeEvent } from 'react-native';
import {
    PanGestureHandler,
    PinchGestureHandler,
    PinchGestureHandlerStateChangeEvent,
    State,
    PanGestureHandlerStateChangeEvent,
} from 'react-native-gesture-handler';

const IMAGE_DIMENSIONS = {
    width: 2350,
    height: 1767,
} as const;

export default function App() {
    const scale = useRef(new Animated.Value(1)).current;
    const translateX = useRef(new Animated.Value(0)).current;
    const translateY = useRef(new Animated.Value(0)).current;
    const setInitialPanZoom = useCallback((event: LayoutChangeEvent) …

我有一个MainFooter包含页脚和迷你播放器的组件，单击时可动画显示为全视图。我有一个问题，每当我们点击一​​个页脚选项卡时，播放器最大化然后卡在那里，没有响应。

此外，播放器内部的向下箭头图标在单击时不会将其最小化，单击 MiniPlayer 也不会将其最大化，但是我们可以通过单击并将其拖动到全视图来最大化 MiniPlayer，对于最大化的 Player 也是如此。

这是MainFooter组件：

export const MainFooter = ({ setCounter, counter }: Props) => {
  const translationY = new Value(0);
  const velocityY = new Value(0);
  const state = new Value(State.UNDETERMINED);
  const offset = new Value(SNAP_BOTTOM);
  const goUp: Animated.Value<0 | 1> = new Value(0);
  const goDown: Animated.Value<0 | 1> = new Value(0);

  const gestureHandler = onGestureEvent({
    state,
    translationY,
    velocityY,
  });

  const translateY = clamp(
    withSpring({
      state,
      value: translationY,
      velocity: velocityY,
      snapPoints: [SNAP_TOP, SNAP_BOTTOM], …

从 RN 版本 0.63.2 升级到 0.65.0-rc.3 后无法构建 iOS 应用程序。我收到此错误：

在 /Users/.../ReactNativeProjects/.../node_modules/react-native-gesture-handler/ios/RNGestureHandlerManager.m:1 包含的文件中：/Users/.../ReactNativeProjects/.../node_modules/ react-native-gesture-handler/ios/RNGestureHandlerManager.h:9:52: 错误：需要一个类型 eventDispatcher:(nonnull RCTEventDispatcher *)eventDispatcher;

问题出在 RNGestureHandlerManager.h 的以下行中：

- (nonnull instancetype)initWithUIManager:(nonnull RCTUIManager *)uiManager
                          eventDispatcher:(nonnull RCTEventDispatcher *)eventDispatcher;

当我升级到 RNGestureHandler 版本 1.10.3 时，出现以下错误：

未定义符号：OBJC_CLASS $_RCTScrollView

未定义符号：OBJC_METACLASS $_RCTViewManager

未定义符号：OBJC_CLASS $_RCTEventEmitter

未定义的符号：__RCTNotImplementedException

未定义的符号：_RCTGetUIManagerQueue

未定义的符号：OBJC_CLASS $_RCTConvert

未定义的符号：_RCTRegisterModule

未定义的符号：_RCTDefaultLogFunction

未定义符号：OBJC_CLASS $_RCTRootView

未定义符号：OBJC_METACLASS $_RCTEventEmitter

未定义符号：OBJC_CLASS $_RCTTouchHandler

未定义符号：OBJC_CLASS $_RCTViewManager

未定义的符号：__RCTLogNativeInternal

我在github页面提交问题已经3天了，但团队没有回复。我真的很感激任何帮助。欢迎任何想法！这真的开始困扰我了。

这是我在 github 上创建的问题的链接： https: //github.com/software-mansion/react-native-gesture-handler/issues/1543

多谢...

我使用yarn重新安装了react-native项目中的所有node_modules（删除node_modules并运行yarn）。完成后，我启动了我的应用程序，并且突然弹出此警告：

[react-native-gesture-handler] 似乎您正在使用带有手势组件的旧 API，请查看新的手势系统！

然后它列出了很多反应原生元素（我认为），如下所示：

PanGestureHandler@http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:133321:38
PanGestureHandler@http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:132628:34
RCTView
View
AnimatedComponent@http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:68721:38
AnimatedComponentWrapper
RCTView
View
Card@http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:131894:36
CardContainer@http://IP/index.bundle?platform=android&dev=true&minify=false&app=com.legosocialmedia&modulesOnly=false&runModule=true:131451:34
RNSScreen

And so on....

我尝试重新安装react-native-gesture-handler（yarn romovereact-native-gesture-handler和yarnaddreact-native-gesture-handler），但这并没有改变任何东西。

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, …

import React, { useRef, useState, useCallback } from 'react';
import { View, Animated } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';


const InfoBox = ({ info }: Props) => {
  const [currenPos, setCurrentPos] = useState<number>(0);
  const translateY = useRef(new Animated.Value(0)).current;

  const onGestureEvent = useCallback(
    Animated.event(
      [
        {
          nativeEvent: {
            translationY: translateY,
          },
        },
      ],
      {
        useNativeDriver: true,
      },
    ),
    [],
  );

  const handleTransformStyle = {
    transform: [
      {
        translateY,
      },
      {
        translateX: -55,
      },
    ],
  };

  return (
    <View …