标签: react-native-reanimated

我使用 PanGestureHandler 和 ScrollView 编写了一个菜单。

问题是; 当 PanGestureHandler 处于活动状态时，ScrollView 的滚动不起作用。

我的意思是滑动功能有效但滚动无效。

我的期望是一起使用这两个功能。

我在下面分享了我的实现代码。

任何的想法？_

构造函数

    constructor(props) {
        super(props);
        this.state = {
            enable: true,
        };


        const dragX = new Value(0);
        const dragY = new Value(0);
        const state = new Value(-1);

        const offsetY = new Value(0);

        this.gestureHandler = event([
            {
                nativeEvent: {
                    translationX: dragX,
                    translationY: dragY,
                    offsetY,
                    state
                }
            }
        ]);

        this.transitionX = block([
            cond(
                eq(state, State.ACTIVE),
                [

                    interpolate(dragX, {
                        inputRange: [MIN_SWIPE_X, MAX_SWIPE_X],
                        outputRange: [MIN_SWIPE_X, MAX_SWIPE_X],
                        extrapolate: "clamp"
                    }),
                ],
                [

                    cond( …

我使用 react native reanimated 创建了一个简单的动画，但我无法访问 Reanimated Value 的数值

我使用的是胜利本机饼图，我想制作一个简单的效果，饼角从 0 到 360，但我已经尝试过 react-native 动画 API，它可以很好地与添加侦听器配合使用，但我想使用重新动画来解决性能问题

我正在寻找的图表从 0 到 360 开始的动画效果

使用 react-native Animated API 正确运行：

const Chart = props => {
  const { data, width, height } = props;
  const endAngleAnimatedValue = new Value(0);
  const [endAngle, setEndAngle] = useState(0);
  const runTiming = Animated.timing(endAngleAnimatedValue, {
    duration: 1000,
    to: 360
  });

  useEffect(() => {
    endAngleAnimatedValue.addListener(_endAngle => setEndAngle(_endAngle));
    runTiming.start();
    return () => {
      endAngleAnimatedValue.removeAllListeners();
    };
  }, [endAngleAnimatedValue]);

  return (
    <VictoryPie
      data={data}
      width={width}
      height={height} …

我正在尝试构建一个 React Native 应用程序。我在终端上发现了一个错误说

Unable to resolve "./useValue" from "node_modules\react-native-reanimated\src\Animated.js"

我重新安装了 react-native-reanimated 到预期的版本范围。

`您项目的某些依赖项与当前安装的 expo 包版本不兼容：

• react-native-reanimated - 预期版本范围：~1.9.0 - 安装的实际版本：^1.10.1 在安装正确版本的软件包之前，您的项目可能无法正常工作。要安装这些软件包的正确版本，请运行：expo install [package-name ...]`

因此，我按如下方式运行代码：npm install react-native-reanimated@1.9.0，但仍然遇到错误代码。

我真的可以在这方面使用一些帮助。

我目前正在学习使用 RN Reanimated和Redash库创建 React Native Animations 。我设法创建了一个简单的定时动画，它将 TextInput 占位符转换为标签。

  import Animated, { Clock, Easing, set, useCode } from 'react-native-reanimated';
  import { timing } from 'react-native-redash/lib/module/v1';

  const [isFocused, setIsFocused] = useState(false);
  const clock = new Clock();
  const [animation] = useState(new Animated.Value(0));
  const shouldAnimateLabel = isFocused || !!value;

  useCode(() =>
    set(
      animation,
      timing({
        clock,
        animation,
        duration: 150,
        from: shouldAnimateLabel ? 0 : 1,
        to: shouldAnimateLabel ? 1 : 0,
        easing: Easing.inOut(Easing.ease),
      }),
      [shouldAnimateLabel],
    ),
  );

  const animatedStyles = { …

所以这是我第一次使用 Reanimated 2，不幸的是我的应用程序因上述消息而崩溃。无法查看我的应用程序屏幕。

不变违规：TurboModuleRegistry.getEnforcing(...)：找不到“NativeReanimated”。验证此名称的模块是否已在本机二进制文件中注册。

我在这里使用 reanimated

import React from 'react'
import Item from '../../Common/Item'
import {View,Text,FlatList,StyleSheet , TouchableOpacity} from 'react-native'

import Animated, {useAnimatedStyle} from 'react-native-reanimated';
import {bin,mix,useTiming} from 'react-native-redash' 


const {interpolate,not}=Animated
const SectorItem=({sector,clients,index,opened,toggleSector})=> {
        const {name}=sector
        const ITEM_HEIGHT = 100
        const transition = useTiming(opened)
        const style = useAnimatedStyle(()=>({
          height: mix(transition,0,clients.length * ITEM_HEIGHT)
        }))
      
        //here we wll also have the clients of each sector 
        return <Item xStyle={styles.item}>
                <View>
                    <Text>{name}</Text>
                    <TouchableOpacity onPress={e=>toggleSector(index)}>
                      <Text>open</Text>
                    </TouchableOpacity>
                </View>
                <Animated.View style={style}>
                    <FlatList 
                       data   = {clients}
                       style …

我有一个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], …

我们正在尝试将测试环境从 jest 26 升级到 27。这是我们的工作分支：https ://github.com/pass-culture/pass-culture-app-native/tree/update-jest-27

到目前为止，我们遇到了一堆仍然无法修复的错误，例如：

TypeError: requestAnimationFrame is not a function

    TypeError: requestAnimationFrame is not a function
      at start (node_modules/react-native/Libraries/Animated/animations/TimingAnimation.js:133:34)

TypeError: global.cancelAnimationFrame is not a function

    TypeError: global.cancelAnimationFrame is not a function

      at TimingAnimation.stop (node_modules/react-native/Libraries/Animated/animations/TimingAnimation.js:176:12)

Exceeded timeout of 5000 ms for a hook

    thrown: "Exceeded timeout of 5000 ms for a hook.
    Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

我们有很多测试失败了，并且找到了一堆建议，但没有一个能够修复我们的测试

这是最常见的错误。

如果您有任何想法并取得进展，我们将受到欢迎。

再生产

1. 克隆我的存储库git clone --single-branch --branche update-jest-27 https://github.com/pass-culture/pass-culture-app-native.git
2. cd …

当尝试在 Jest 中渲染我的应用程序以进行一些集成测试时，我收到以下错误：

    TypeError: Cannot read property 'createNode' of undefined

      at AnimatedParam.createNode [as __nativeInitialize] (node_modules/react-native-reanimated/src/core/AnimatedNode.js:126:24)
      at AnimatedParam.__nativeInitialize [as __attach] (node_modules/react-native-reanimated/src/core/AnimatedNode.js:71:10)
      at new __attach (node_modules/react-native-reanimated/src/core/AnimatedParam.js:11:10)
      at createAnimatedParam (node_modules/react-native-reanimated/src/core/AnimatedParam.js:71:10)
      at createAnimatedFunction (node_modules/react-native-reanimated/src/core/AnimatedFunction.js:38:17)
      at Object.<anonymous> (node_modules/react-native-reanimated/src/derived/interpolate.js:17:39)

它抱怨的代码react-native-reanimated如下所示：

  __nativeInitialize() {
    if (!this.__initialized) {
      ReanimatedModule.createNode(this.__nodeID, { ...this.__nodeConfig });
      this.__initialized = true;
    }
  }

并且是来自库ReanimatedModule的类型别名。除此之外，我还没有找到任何有助于解决此问题的有用信息。NativeModulereact-native

这里特别奇怪的是，据我所知，我没有直接react-native-reanimated在我的代码库中使用，并且我能找到的唯一使用它的库组件没有在正在测试的组件中呈现。

我无法以任何合理的方式精简我的代码来重现此问题，并且相关代码受公司版权保护，因此我无法共享存储库。我将继续尝试在一个小示例中重现该错误，但我想将这个问题提出来，以防有人对此问题有任何经验。

我正在使用带有和 的react-native-gesture-handler库。我想让scrollView可滚动，它嵌套在panGestureHandler中，但所有交互都是由 处理的，所以scrollView不起作用。这是我的代码。reanimatedreact-native-redashpanGestureHandler

VideoModal.js文件

import Animated , {useCode , cond , eq , set , add, block, interpolate, Extrapolate} from "react-native-reanimated"
import {PanGestureHandler , State } from "react-native-gesture-handler"
import {usePanGestureHandler , useValue , timing , snapPoint} from "react-native-redash/lib/module/v1"



export default function VideoModal(props) {



const { video } = props;
const {gestureHandler , velocity , translation , state} = usePanGestureHandler()
const translateY = useValue(0)
const offsetY = useValue(0);
const snapPoints = snapPoint(translateY , velocity.y , …

这是我的组件。很简单，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 …