标签: react-native-reanimated-v2

我正在学习 React Native Reanimated 版本 2，但在创建调用'worklet'.

我在使用npx react-native init myApp.
我已遵循所有安装说明，如下所示。

• 配置babel.config.js：

    module.exports = {
      presets: ['module:metro-react-native-babel-preset'],
      plugins: [
        'react-native-reanimated/plugin'
      ]
    };

• 启用Hermes并将其设置为 true。
• 配置MainApplication.java文件。
• 清理构建。
• 使用重置缓存yarn start --reset-cache。

我尝试制作一个简单的Worklet函数，如下所示：

    import React from 'react';
    import { View, Button } from 'react-native';

    const App = () => {

      const someWorklet = () => {
        'worklet';
        console.log('this run on UI thread');
      };

      return (
        <View >
          <Button …

这是我的组件。很简单，PanGestureHandler有一些 svg。

import React from 'react'
import { StyleSheet, View, Text } from 'react-native'
import Svg, { Circle, Line } from 'react-native-svg'
import Layout from '../constants/Layout'
import {
  PanGestureHandler,
  TapGestureHandler
} from 'react-native-gesture-handler'
import Animated, {
  useSharedValue,
  useAnimatedGestureHandler,
  useAnimatedProps,
  withTiming,
  Easing
} from 'react-native-reanimated'

const AnimatedCircle = Animated.createAnimatedComponent(Circle)

const chartWidth = Layout.window.width
const chartHeight = chartWidth / 2.6
const timing = 200

export default function Chart () {
  const x = useSharedValue(chartWidth / 2)
  const y = useSharedValue(chartHeight …

我试图根据来自 reanimated 2 useAnimatedScrollHandler的滚动事件隐藏和显示标题，并且我需要使用diffClamp，因此每当用户向上滚动时，标题的显示时间应少于整个滚动事件contentOffset.y值，但问题是 diffClamp 是我认为来自reanimated v1 的，我需要使用 useAnimatedStyle 钩子才能在reanimated v2中对样式进行动画处理，最后它给出了一个错误。

有人可以帮忙吗？

有一些手势处理程序可以在浏览器中正常工作，但我在 iOS 上的 useAnimatedGestureHandler 挂钩的 onEnd 回调中收到此错误。

这是与我尝试添加的手势相关的所有代码

    const headerHeight = useSharedValue(176)

    const outerStyle = useAnimatedStyle(() => ({
        minHeight: 176,
        maxHeight: 416,
        height: headerHeight.value,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
        position: 'relative',
        overflow: 'visible',
        zIndex: 502,
    }))

    const innerStyle = useAnimatedStyle(() => ({
        overflow: 'hidden',
        height: headerHeight.value,
        minHeight: 176,
        maxHeight: 416,
        borderBottomLeftRadius: 20,
        borderBottomRightRadius: 20,
    }))

    
    const resizeHeaderHeight = useAnimatedGestureHandler({
        onStart: () => {},
        onActive: (event) => {
            headerHeight.value = event.absoluteY
        },
        onEnd: () => {
            if(headerHeight.value < 305) {
                headerHeight.value  = …

我花了最后一天的时间试图找出如何使用反应导航实现简单的淡入淡出屏幕转换，但我找不到一种方法让它与底部选项卡导航器一起使用。有人可以帮我吗？我已经广泛阅读了文档，但动画似乎只能通过堆栈导航器使用。

你能在这个小吃演示中进行过渡吗？

https://snack.expo.io/?platform=android&name=Native%20Stack%20Navigator%20%7C%20React%20Navigation&dependencies=%40expo%2Fvector-icons%40*%2C%40react-native-community%2Fmasked-view %40*%2Creact-native-gesture-handler%40*%2Creact-native-pager-view%40*%2Creact-native-paper%40%5E4.7.2%2Creact-native-reanimated%40*%2Creact-native -safe-area-context%40*%2Creact-native-screens%40*%2Creact-native-tab-view%40%5E3.0.0%2C%40react-navigation%2Fbottom-tabs%406.0.4%2C%40react -navigation%2Fdrawer%406.1.3%2C%40react-navigation%2Felements%401.0.4%2C%40react-navigation%2Fmaterial-bottom-tabs%406.0.4%2C%40react-navigation%2Fmaterial-top-tabs%406.0 .2%2C%40react-navigation%2Fnative-stack%406.0.5%2C%40react-navigation%2Fnative%406.0.2%2C%40react-navigation%2Fstack%406.0.6&hideQueryParams=true&sourceUrl=https%3A%2F%2Freactnavigation .org%2Fexamples%2F6.x%2Ftab-based-navigation-minimal.js

我正在关注本教程：https://youtu.be/r5XXSb4yQes（代码： https: //github.com/wcandillon/can-it-be-done-in-react-native/tree/master/season3/src/ CoinbasePro）并按照他所说的做了，但我无法使洗涤器（水平和垂直线）工作。

如您所见，即使我按下/拖动，滑块/线也不会出现。

PanGestureHandler 触发时预期的水平线和垂直线：

import Animated, {
  add,
  diffClamp,
  eq,
  modulo,
  sub,
} from "react-native-reanimated";
import { useValues, onGestureEvent } from "react-native-redash/lib/module/v1";
import { PanGestureHandler, State } from "react-native-gesture-handler";
import Svg, { Line } from "react-native-svg";
import data from "../../utils/data";

const MainScreen = () => {
  
  const caliber = data.length > 0 ? width / data.length : 0;

  const [x, y, state] = useValues(0, 0, State.UNDETERMINED);
  const gestureHandler = onGestureEvent({ x, …