如何在Expo React Native项目中通过className使用Tailwind动画？

检查依赖与配置完整性 #

• 确保react-native-reanimated和nativewind已正确安装：

  npx expo install react-native-reanimated
  npm install nativewind
  

• 修改babel.config.js添加Reanimated插件，修改后必须重启Metro服务：

  module.exports = function(api) {
    api.cache(true);
    return {
      presets: ['babel-preset-expo'],
      plugins: ['react-native-reanimated/plugin'],
    };
  };
  

替换原生组件为支持的交互组件 #

原生Button组件对NativeWind样式和动画的支持有限，建议改用Pressable实现交互动画：

import { Pressable, Text } from 'react-native';

<Pressable
  className="transition ease-in-out delay-150 bg-blue-500 active:-translate-y-1 active:scale-110 active:bg-indigo-500 duration-300 px-4 py-2 rounded"
>
  <Text className="text-white font-medium">press</Text>
</Pressable>

注：移动端没有鼠标hover状态，需用active:前缀替代hover:来触发触摸时的动画效果。

验证NativeWind配置正确性 #

确保tailwind.config.js配置正确，包含项目文件路径并引入NativeWind核心插件：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.{js,jsx,ts,tsx}",
    "./screens/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
  corePlugins: require('nativewind/tailwind/css').corePlugins,
};

自定义关键帧动画（可选） #

若使用自定义动画，需在tailwind.config.js中定义关键帧和动画类：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      animation: {
        'bounce-custom': 'bounce 1s infinite',
      },
      keyframes: {
        bounce: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-10px)' },
        },
      },
    },
  },
};

使用示例：

<View className="animate-bounce-custom bg-blue-500 w-20 h-20 rounded-full" />

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