React Native使用tailwind-rn时样式设置不生效如何解决

你的代码中useTailwind的调用存在根本性语法错误，直接导致样式无法生成：

• useTailwind是标准React Hook，必须在组件函数的顶层作用域调用，拿到返回的样式生成方法后再使用，不能直接在JSX属性上挂载调用
• 你写的useTailwind.style=("flex-1 justify-center items-center")是非法的赋值语法，既没有正确执行Hook，也没有正确传入类名生成样式对象

1. 先在App组件顶层调用useTailwind()，拿到样式生成函数
2. 在JSX中直接调用该函数，传入Tailwind类名字符串作为style属性的值，不要额外写等号赋值

修正后的完整代码：

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {useTailwind} from 'tailwind-rn';

export default function App() {
  // 顶层调用Hook获取样式生成方法
  const tw = useTailwind();
  return (
    <View style={tw("flex-1 justify-center items-center")}>
      <Text>This is test</Text>
      <StatusBar style="auto" />
    </View>
  );
}

额外提醒：如果改完语法还是不生效，确认你是否执行过npx tailwind-rn build命令生成项目所需的tailwind样式映射文件，这是tailwind-rn初始化必须的步骤，漏执行也会导致样式不输出。

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