标签: react-native-reanimated-v2

我试图在下面的示例中完成非常相似的动画。

borderWidth我的方法是这样的：获取语音音量数据，使用 shareValue将其附加到视图中react-native-reanimated。但是，由于borderWidth将自身附加到 的内部View，因此可视化效果如下例所示：

下面你可以找到我的代码，

相关状态的初始化react-native-reanimated。

  const voiceVolumeMeter = useSharedValue(0);
  const voiceVolumeMeterStyles = useAnimatedStyle(() => {
    return {
      borderWidth: voiceVolumeMeter.value,
    };
  });

将体积数据附加到voiceVolumeMeter参数：

  voiceVolumeMeter.value = withSpring(55 + e.currentMetering!, {
    stiffness: 90,
    velocity: 12,
    mass: 0.5,
  });

适用animatedStyle于View

<Animated.View style={[styles.volumeMeterContainer, voiceVolumeMeterStyles]}>
  <View style={styles.recorderCircle}>
    <Text style={styles.audioRecorderTimer}>{recorderState.duration}</Text>
  </View>
</Animated.View>

上面代码示例使用的样式：

  recorderCircle: {
    width: 280,
    height: 280,
    borderRadius: 150,
    borderColor: Colors.DUSTY_ORANGE,
    justifyContent: 'center',
    alignItems: 'center',
  },

  volumeMeterContainer: {
    width: 290, …

我需要使用 React Native Reanimated 创建抽屉动画（https://www.npmjs.com/package/react-native-reanimated）。

在更新插值方法之前，使用 2 个参数可以正常工作。其用法如下

interpolate(
   props.progress,
   {
    [0, 1],
    [1, 0.85],
    Extrapolate.CLAMP
   }
);

但更新后，该方法将采用 3 到 4 个参数

interpolate(
   props.progress,
   [0, 1],
   [1, 0.85],
   Extrapolate.CLAMP
);

现在我收到如下错误

Argument of type 'AnimatedNode<number>' is not assignable to parameter of type 'number'

我当前的 React Native Reanimated 版本是 2.1.0

通过 DrawerContent(DrawerContentComponentProps) 传递 Props，如下所示

drawerContent={(props) => {
            const scale = interpolate(
              props.progress,
              [0, 1],
              [1, 0.85],
              Extrapolate.CLAMP
            );

            const borderRadius = interpolate(
              props.progress,
              [0, 1],
              [0, 10],
              Extrapolate.CLAMP …

场景：我在屏幕上渲染了svg circle和 a 。state我也有两个按钮。Change Size按钮将圆的大小（共享值）从 50 更改为 100 或 100 更改为 50。更改状态按钮将状态从“苹果”更改为“橙色”或“橙色”更改为“苹果”。[注意：动画不以任何方式使用状态。我也在size.value每次重新渲染中控制台记录]

问题：Change Size按下按钮后，它会将圆圈从 50 动画到 100。现在，如果您按下Change State按钮，它会更改状态，但也会使圆圈的大小恢复到 50，尽管我们的日志显示共享值size.value仍然是 100 。

预期行为：预期圆的大小保持为 100，因为这是提供给圆的共享值。

代码：

import React, {useState, useEffect} from 'react';
import { Text, View, Button} from 'react-native';
import Animated, {
  useAnimatedProps,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';
import Svg, {Circle} from 'react-native-svg';

const App = () => {
  const [state, setState] …

我有一个反应功能组件Svg用作 Bottom-TabBar 的图标。在路线更改时，将当前路线state.index与路线进行比较index。结果本质上是一个布尔状态，isFocused被传递到 Svg。

我正在尝试根据此状态对 Svg 进行动画处理，但无法使用重新动画完成简单的操作。我最确定的是，填充的值没有在useAnimatedProps钩子中更新，但我缺乏对复活有深入了解的经验。任何帮助将不胜感激

import Animated, {
  useAnimatedProps,
  useSharedValue,
} from 'react-native-reanimated';
import Svg, { Circle, Path } from 'react-native-svg';

const AnimatedSvg = Animated.createAnimatedComponent(Svg);

export default ({ isFocused }) => {
  const fill = useSharedValue({ fill: 'transparent' });
  const animatedProps = useAnimatedProps(() => {
    isFocused
      ? (fill.value = { fill: 'red' })
      : (fill.value = { fill: 'transparent' });

    return fill.value;
  });
  return (
    <AnimatedSvg
      xmlns="http://www.w3.org/2000/svg"
      width={24} …

我正在尝试创建具有滑动删除功能的垂直平面列表。因此，我的平面列表的每个项目均由PanGestureHandler我的问题是当我尝试滚动时，由于滚动视图动画与平移手势动画之间的冲突，我的平面列表滚动不起作用。我尝试过使用simultaneousHandlers但没有帮助。我也尝试使用FlatListfromreact-native-gesture-handler和 fromreact-native结果是一样的。

<View style={styles.container}>
            <Header data={{headerText: 'Contacts', leftIcon: 'arrow-left', line: true}}/>
            <FlatList
                ref={scrollRef}
                data={contacts}
                renderItem={({item}) => <Item simultaneousHandlers={scrollRef} {...{item}} />}
                bounces={false}
                showsVerticalScrollIndicator={false}
                style={{paddingLeft: wp('5%'), paddingTop: hp('2%')}}>
            </FlatList>
            <TouchableOpacity style={styles.touchableOpacity} onPress={() => navigation.navigate('AddContact')}>
                <View>
                    <Text style={styles.textButton}> Add Contact </Text>
                </View>
            </TouchableOpacity>
        </View>

物品：

<Animated.View style={[rTaskContainerStyle]}>
                    <Animated.View style={[styles.iconContainer, rIconContainerStyle]}>
                        <Icon name={'trash-2'} size={25} color={'red'} />
                    </Animated.View>
                    <View>
                    <PanGestureHandler {...simultaneousHandlers} onGestureEvent={panGestureHandler}>
                        <Animated.View style={[rStyle,{backgroundColor: '#FFFFFF'}]}>
                            <Text style={{color: '#09101D', fontFamily: 'SourceSansPro_600SemiBold', fontSize: 18}}>
                                {info.fullName}
                            </Text>
                            <Text …

我正在构建一个可以向上/向下滑动以改变其高度的底板。我希望其内部子组件可滚动，但它无法按预期工作。我只是猜测其原因是任何触摸事件（例如滚动）ScrollView都会被捕获并冒泡，GestureDetector因此滚动内部内容不起作用，而滑动工作表本身却起作用。

import { Dimensions, StyleSheet, TouchableOpacity } from 'react-native';
import React, { useCallback, useEffect } from 'react';
import Animated from 'react-native-reanimated';
import {
  Gesture,
  GestureDetector,
  ScrollView,
} from 'react-native-gesture-handler';
import {
  Extrapolate,
  interpolate,
  useAnimatedStyle,
  useSharedValue,
  withSpring,
} from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useHeaderHeight } from '@react-navigation/elements';

const { height: SCREEN_HEIGHT } = Dimensions.get('window');

type Props = {
  top: number;
  bottom: number;
  initialBottomOffset: number;
};

export const BottomSheet: React.FC<Props> = ({
  children, …

我正在将一些默认Animated内容转换为react-native-reanimated v2字符串百分比，但似乎无法弄清楚如何将值插入字符串百分比。我在文档中也找不到与此相关的任何内容。

使用 React-native 的 Animated 我可以这样做：

width: widthAnim.interpolate({
   inputRange: [0, 1],
   outputRange: ['0%', '100%'],
})

但是interpolate()reanimated 的函数只需要数字参数，那么我怎样才能对宽度进行动画处理呢？

interpolate(widthAnim.value, [0, 1], ['0%', '100%'])
// err: Type 'string' is not assignable to type 'number'.

我正在尝试使用react-native-reanimated让一些组件在安装和卸载时淡入淡出。我认为代码非常简单：

import { View } from "react-native";
import Animated, { FadeIn, FadeOut } from "react-native-reanimated";

export const Dialog = () => (
  <Animated.View
    style={styles.loadingWrapper}
    entering={FadeIn}
    exiting={FadeOut}
  >
    <Progress.CircleSnail />
  </Animated.View>
);

const App = () => {

  const [isVisible, setIsVisible] = useState(false);

  return (
    <View>
      {isVisible && <Dialog />}
      <Button 
        title="Open Dialog" 
        onPress={() => setIsVisible(true)}
      />
    </View>
  );

}

我的期望是，随着isVisible道具的变化，它Dialog会淡入淡出。正在发生的事情是它突然出现又消失，就好像我使用的是简单的View，而不是Animated.View.

演示设置的小吃

我无法在小吃中重现这个问题。在零食中它似乎效果很好。在我的实际代码库中，这只是一个稍微分层的版本，没有动画。我怎样才能开始调试这个？

我的应用程序中的所有实例都是这种情况Animated.View。我让它在某个时候工作，然后在这个过程中的某个地方，它停止工作了。我不确定发生了什么变化。我正在使用世博会管理的项目。这是我的 package.json 和版本的相关部分：

{
  "scripts": {
    "start": "expo …