如何在React Native类组件中使用tailwind-rn？

Hooks只能在函数组件的顶层作用域调用，所以类组件里直接用useTailwind会触发报错。你可以改用tailwind-rn提供的核心tailwind函数来实现样式设置，无需依赖Hook。

基础实现步骤： #

• 直接导入tailwind-rn的核心函数，而非Hook：

  import { tailwind } from 'tailwind-rn';
  

• 在类组件的render方法中直接调用该函数生成样式：

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { tailwind } from 'tailwind-rn';

class DemoComponent extends Component {
  render() {
    return (
      <View style={tailwind('flex-1 justify-center items-center bg-gray-100')}>
        <Text style={tailwind('text-xl font-bold text-blue-600')}>类组件Tailwind示例</Text>
      </View>
    );
  }
}

export default DemoComponent;

处理主题切换（如深色模式） #

如果需要响应主题变化，可手动监听主题状态并更新组件：

import React, { Component } from 'react';
import { View, Text, Appearance } from 'react-native';
import { tailwind, getColor } from 'tailwind-rn';

class ThemedComponent extends Component {
  state = {
    colorScheme: Appearance.getColorScheme(),
  };

  componentDidMount() {
    this.themeListener = Appearance.addChangeListener(({ colorScheme }) => {
      this.setState({ colorScheme });
    });
  }

  componentWillUnmount() {
    this.themeListener.remove();
  }

  render() {
    return (
      <View style={tailwind('flex-1 justify-center items-center')}>
        <Text style={tailwind('text-xl font-bold')}>当前主题：{this.state.colorScheme}</Text>
        <Text style={{ color: getColor('primary-600') }}>动态主题色文本</Text>
      </View>
    );
  }
}

export default ThemedComponent;

说明：tailwind核心函数会自动适配已配置的主题规则，getColor函数可直接获取对应主题下的颜色值，结合状态监听即可实现类组件的主题响应。

内容的提问来源于stack exchange，提问作者Hamza-Snoussi