React Native集成Tailwind CSS时className多样式失效问题求助

问题原因 #

你遇到的情况是因为两个核心问题：

• items-center是Tailwind的flex容器属性，必须先给View添加flex类声明为flex容器，否则该属性不会生效，自然无法实现文本居中。
• 未设置View的高度，在Web端（对应HTML的div元素），容器高度会自适应内容，再加上flex布局未初始化，导致黑色背景因容器高度不足而无法显示。

修复后的代码 #

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

export default function App() {
  return (
    <>
      <View className="bg-black flex items-center h-screen">
        <Text className="text-indigo-500">Open up App.js to start working on your app!</Text>
        <StatusBar style="auto" />
      </View>
    </>
  );
}

关键调整说明 #

1. 添加flex类：将View标记为flex容器，这样items-center才能生效，实现子元素的水平居中。
2. 添加h-screen类：让View铺满整个浏览器窗口高度，保证黑色背景正常显示，同时让居中效果在可视区域内呈现。如果不需要全屏，也可以用min-h-full或固定高度（如h-[400px]）替代，根据项目需求调整。

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