React Native中Moti动画无法显示的问题排查求助

你的MotiView无法显示的核心原因是没有设置可视样式（尺寸、背景色），React Native的View（包括MotiView）默认无宽高和背景，即便动画参数配置正确，也会因元素无尺寸区域而不可见。结合你的代码和配置，以下是具体修复步骤：

1. 修复MotiView的样式缺失问题 #

给MotiView添加style属性，设置宽高、背景色等可视样式，同时可以给外层View添加布局样式让元素居中：

import { MotiView, MotiText } from "moti"
import React from "react";
import { View, Text } from 'react-native';
export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello world</Text>
      <MotiView
        style={{ width: 200, height: 200, backgroundColor: '#4287f5', marginTop: 20 }}
        from={{ opacity: 0, scale: 0.5 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{
          type: 'timing',
          duration: 350,
          scale: {
            type: 'spring',
            delay: 100,
          },
        }}
      />
    </View>
  )
}

2. 确保Reanimated配置生效 #

你的babel.config.js配置是正确的，但需注意：

• 修改babel配置后，必须重启Metro开发服务器（关闭现有服务后重新执行npx expo start或npm start），否则Reanimated的插件无法生效。
• 你的依赖版本兼容：react-native-reanimated@~2.9.1和moti@^0.21.0属于匹配的版本组合，无需调整版本。

3. 额外排查点 #

• 若仍无动画效果，尝试清除缓存后重启服务：执行npx expo start --clear
• 检查设备/模拟器的动画开关是否开启：iOS需开启「设置-辅助功能-动态效果」，Android需开启「设置-开发者选项-动画时长缩放」

内容的提问来源于stack exchange，提问作者jkkCoder