React Native 过渡不是动画答案

【问题标题】：React native transitioning is not animatingReact Native 过渡不是动画
【发布时间】：2022-12-21 03:06:34
【问题描述】：

我在yt上看了一个教程，这里是开发者提供的源代码 https://github.com/catalinmiron/react-native-accordion-menu/blob/master/App.js

我的代码是

import {Transition, Transitioning} from 'react-native-reanimated';
const transition = (
  <Transition.Together>
    <Transition.In type="fade" durationMs={200} />
    <Transition.Change />
    <Transition.Out type="fade" durationMs={200} />
  </Transition.Together>
);
const expndRef = React.createRef(null);

export default class MyComponent extends Component {
    constructor(props) {
      super(props);
      this.state = {
         
        subLen: 80,
        txt: 'continue',
      };
    }

在渲染中

<Transitioning.View
  transition={transition}
  ref={expndRef}
  marginVertical={10}
  flexDirection="row"
  flexWrap="wrap"
  bg="#fff"
  justifyContent="flex-start"
>
  <Text>
    {this.props.text.substring(0, this.state.subLen)}
    <Text
      color="blue"
      onPress={() => {
        if (this.state.subLen == 80) {
          this.setState({ subLen: 700, txt: "close" }, () => {
            expndRef.current?.animateNextTransition();
          });
        } else {
          expndRef.current?.animateNextTransition();
          this.setState({ subLen: 80, txt: "continue" });
        }
      }}
    >  
      {this.state.txt}
    </Text>
  </Text>
</Transitioning.View>

这真的很简单，但为什么它没有动画

结果

继续

【问题讨论】：

任何帮助修复动画的人

标签： react-native react-native-reanimated-v2

【解决方案1】：

确保像这样在 babel.config.js 文件中注册 react-native-reanimated 插件

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

完成后确保重置缓存。根据您的工作流程，您可以使用以下列出的任何一种：

yarn start --reset-cache

npm start -- --reset-cache

expo start -c

你可以在这里找到这个答案的参考https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/

让我知道这是否有帮助。

【讨论】：