嗨,我希望animated.view像圆圈一样移动.我用窦思考这个但是它不起作用.有人知道怎么做吗？我不想旋转视图.它应该在圆圈中移动.我是新来的本地人.如果有人可以帮助我会很好.

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, Animated, Button, TouchableOpacity } from 'react-native';

// create a component
class MyClass extends Component {
  constructor() {
    super()
    this.animated = new Animated.Value(0);
  }

  animate() {    
    this.animated.setValue(0)
    Animated.timing(this.animated, {
      toValue: Math.PI *2,
      duration: 1000,
    }).start();
  }


  render() {
    const translateY = this.animated.interpolate({
      inputRange: [0, Math.PI *2],
      outputRange: [0, 200]
    });
    const translateX = translateY
    const transform = [{ translateY }, {translateX}];
    return (
      <View style={styles.container}>
        <Animated.View …

我正在创建一个文本组件，默认情况下我希望它是 2 行，如果用户点击它，它将扩展到完整长度，如果用户再次点击它，它将折叠回 2 行。

到目前为止，我的返回函数中有类似的内容：

<TouchableWithoutFeedback
    onPress={() => {
      toggleExpansion();
    }}
>
  <Animated.View style={[{ height: animationHeight }]}>
    <Text
      style={styles.textStyle}
      onLayout={event => setHeight(event.nativeEvent.layout.height)}
      numberOfLines={numberOfLines}
    >
      {longText}
    </Text>
  </Animated.View>
</TouchableWithoutFeedback>

我的状态变量和toggleExpansion函数如下所示：

const [expanded, setExpanded] = useState(false);
const [height, setHeight] = useState(0);
const [numberOfLines, setNumberOfLines] = useState();

const toggleExpansion = () => {
  setExpanded(!expanded);
  if (expanded) {
    setNumberOfLines(undefined);
  } else {
    setNumberOfLines(2);
  }
};

到目前为止，这可以展开和折叠，但我不确定如何设置 Animated.timing 函数来为其设置动画。我尝试过这样的事情：

const animationHeight = useRef(new Animated.Value(0)).current;

useEffect(() => {
  Animated.timing(animationHeight, {
    duration: 1000,
    toValue: height,
    easing: …

目标：有一个下拉视图，可以随着时间的推移对高度扩展进行动画处理。需要注意的是：一旦视图展开，它需要能够动态处理是否存在其他视图数据。如果存在，将呈现一些额外的文本组件。

问题：就目前而言，动画将父级的高度设置为固定高度。因此，当 被additionalContent渲染时，它超出了父级的边界，而父级的高度是固定的。我不想明确设置父级的高度，因为这样我就无法按照我想要的方式为该方面设置动画。我想按原样维护高度动画，并动态调整父级的大小以在additionalContent存在时包含子级

const ListItem = (props) => {
    const [checkInModal, setCheckInModal] = useState(false);
    const [animatedHeight, setAnimatedHeight] = useState(new Animated.Value(0))
    const [animatedOpacity] = useState(new Animated.Value(0))
    const [dynamicHeight, setDynamicHeight] = useState(0);
    const [expanded, setExpanded] = useState(false);

    const toggleDropdown = () => {
        if (expanded == true) {
            // collapse dropdown
            Animated.timing(animatedHeight, {
              toValue: 0,
              duration: 200,
            }).start()

        } else {
            // expand dropdown
             Animated.timing(animatedHeight, {
              toValue: 100,
              duration: 200,
            }).start()
        }
        setExpanded(!expanded)
    }

    const renderAdditionalContent …

我一直在学习 React Native，并且正在尝试学习动画。

经过一番搜索并发现可能性后，我发现您可以使用React-native 中的Animated组件，但也可以使用Reanimated库，它应该可以使动画任务变得更容易。

两者之间存在一些差异，但我想学习一个并坚持下去，直到我认为我对它有了很好的了解。

您认为哪一款最好？