标签: react-native-gesture-handler

我使用react-native-gesture-handler和react-native-reanimated构建了捏合缩放效果。用户可以在图像的任意位置捏合，以手指之间的位置为缩放原点进行放大或缩小。这很棒。我遇到的问题是允许用户以多个捏合手势放大或缩小。这需要记住用户之前的捏合手势的偏移量和缩放比例。使用我当前拥有的代码，当用户第二次捏合时，手势处理程序会记住第一次捏合手势的缩放比例值，不会正确更新缩放原点。如何在不增加转换语句数量的情况下解决此问题？

  const prevZoomScale = useSharedValue(1)
  const currZoomScale = useSharedValue(1)
  const zoomScale = useDerivedValue(() => { return prevZoomScale.value * currZoomScale.value }, [prevZoomScale.value, currZoomScale.value])
  const tempZoomScale = useSharedValue(1)
  const prevOriginOffset = useSharedValue({x: 0, y: 0})
  const tempOriginOffset = useSharedValue({x: 0, y: 0})
  const currOriginOffset = useSharedValue({x: 0, y: 0})
  const pinchOriginOffset = useDerivedValue(() => 
     { 
        return {
                 x: (prevOriginOffset.value.x + currOriginOffset.value.x), 
                 y: (prevOriginOffset.value.y + currOriginOffset.value.y)
        }
    }, 
     [prevOriginOffset.value.x,  prevOriginOffset.value.y,  currOriginOffset.value.x,  currOriginOffset.value.y]
  )

  const onPinchEvent = useAnimatedGestureHandler<PinchGestureHandlerGestureEvent>({
    onStart: (_) => {
      prevZoomScale.value = …

我尝试GestureDetector使用react-native-gesture-handler

import React from 'react';
import { Directions, Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';

/**
 * Component used as Home Page
 */
const HomePage: React.FC  = () => {
  const position = useSharedValue(0);
  const trigger = () => {
    console.log('fdfs')
  }

  const flingGesture = Gesture.Fling()
    .direction(Directions.RIGHT)
    .onStart((e) => {
      position.value = withTiming(position.value + 10, { duration: 100 });
      console.log(e)
      // trigger()
    });

    const flingGestureLeft = Gesture.Fling()
    .direction(Directions.LEFT)
    .onStart((e) => …

在下面的简单滑块（打字稿）示例中，react-native-gesture-handler 中的 PanGestureHandler 仅在手势启动后才会设置。用户需要移动手指。

这就是我想要实现的目标：点击还应该设置滑块值（包括点击和拖动）。这是一种常见模式，例如在搜索视频文件或将音量设置为最大然后进行调整时。

我想我可以将其包装在 TapGestureHandler 中，但我正在寻找最优雅的方法来实现这一目标，而无需太多样板。

// example extracted from https://www.npmjs.com/package/react-native-reanimated-slider
import React, { Component } from 'react';
import Animated from 'react-native-reanimated';
import { PanGestureHandler, State } from 'react-native-gesture-handler';

const { Value, event, cond, eq, Extrapolate, interpolate } = Animated;

interface IProps {
  minimumTrackTintColor: string;
  maximumTrackTintColor: string;
  cacheTrackTintColor: string;
  value: number;
  style: any;
  cache;
  onSlidingStart;
  onSlidingComplete;
}
class Slider extends Component<IProps, {}> {
  static defaultProps = {
    minimumTrackTintColor: '#f3f',
    maximumTrackTintColor: 'transparent',
    cacheTrackTintColor: '#777',
  };

  private gestureState;
  private x; …

我无法使用酶、笑话和反应本机测试库来测试反应本机应用程序。

仅进行渲染测试

it('renders correctly', () => {\n  renderer.create(<App />).toJSON;\n});\n

我收到这个错误

失败 测试/App-test.js\n \xe2\x97\x8f 测试套件运行失败

TypeError: Cannot read property 'Direction' of undefined\n\n  at Object.<anonymous> (node_modules/react-native-gesture-handler/Directions.js:3:33)\n  at Object.<anonymous> (node_modules/react-native-gesture-handler/GestureHandler.js:2:42)\n

测试套件：1 次失败，总共 1 次\n测试：总共 0 次\n快照：总共 0 次\n时间：1.586 秒\n运行所有测试套件。\nnpm 错误！测试失败。请参阅上文了解更多详情。

错误

我正在学习 React Native 手势处理程序和 React Native Reanimated 从文档中。当我获取手势坐标并将其传递给 useShared 值 translateX 时，出现此错误。我在运行 android 8.0.0 的 Samsung Galaxy A5 2017 上运行我的应用程序。请解释你的答案。

应用程序.js

// import { StatusBar } from 'expo-status-bar';
import { useEffect } from 'react';
import { StyleSheet, Text, View,StatusBar,TouchableOpacity } from 'react-native';
import Animated, {useSharedValue, useAnimatedStyle, withTiming,withSpring,withRepeat} from 'react-native-reanimated'
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
import Header from './components/Header';
import Gesture from './screens/Gesture';
const SimpleAnimation=({navigation})=>{
  const SIZE=100.0
  const handleRotation=(progress)=>{
    "worklet";
    return `${progress.value*2*Math.PI}rad`;
  } …

这是在我意识到 onStart() 没有被调用之前

使用 PanGestureHandler 并尝试“拖动”AnimatedView 在网络上不起作用。没有明显的错误，应用程序构建得很好，检查时控制台中没有警告。

有一个警告让我相信这可能是问题的根源。我在控制台中收到一条警告，内容如下：

"transform" style array value is deprecated. Use space-separated string functions, e.g., "scaleX(2) rotateX(15deg)".

我使用带有 containerStyle 样式的 AnimatedView 来转换对象并在拖动时移动它。

问题的根源

所以我一直在进一步研究它，尝试调试它，我开始意识到回调onStart()没有被调用。由于onStart()未调用回调，因此上下文值永远不会最终被设置，并且上下文对象总体保持为空。导致我最初的问题是无法拖动对象。

不过，这在 iOS 上仍然有效。由于某种原因，在 iOS 上onStart()会调用回调。这会导致上下文被填充并起作用。

这是到目前为止我的代码，请记住这只是一个组件。在根目录中，我确实有一个包含整个应用程序的 GestureHandlerRootView 组件。

import { View, Image } from 'react-native';
import Animated, {
    useAnimatedStyle,
    useSharedValue,
    useAnimatedGestureHandler,
    withSpring,
} from 'react-native-reanimated';
import { PanGestureHandler, TapGestureHandler } from 'react-native-gesture-handler';

const AnimatedImage = Animated.createAnimatedComponent(Image);
const AnimatedView = Animated.createAnimatedComponent(View);

export default function EmojiSticker ({ imageSize, …

我有一个堆栈导航，我想在 android 和 IOS 上启用滑动返回，这是我的代码

import {
  createStackNavigator,
  StackViewTransitionConfigs,
} from "react-navigation-stack";
import HomeScreen from "../../screens/Home/Home";
import CategoryScreen from "../../screens/Category/Category";
import SubCategoryScreen from "../../screens/SubCategory/SubCategory";
import ProductScreen from "../../screens/Product/Product";

const ShopStack = createStackNavigator(
  {
    Shop: {
      screen: HomeScreen,
      navigationOptions: {
        gesturesEnabled: true,
      },
    },
    Category: {
      screen: CategoryScreen,
      navigationOptions: {
        gesturesEnabled: true,
      },
    },
    SubCategory: {
      screen: SubCategoryScreen,
    },
    Product: {
      screen: ProductScreen,
      navigationOptions: {
        gesturesEnabled: true,
      },
    },
  },
  {
    headerMode: "none",
    transitionConfig: () => StackViewTransitionConfigs.SlideFromRightIOS,

    defaultNavigationOptions: {
      gesturesEnabled: true, …