文档模板：v0.4.1

nativewind

本项目基于 nativewind 开发。

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/nativewind 版本所属关系如下：

三方库名称	三方库版本	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	npm地址
@react-native-ohos/nativewind	~ 4.1.24	Gitcode Releases	0.77.*	否	API12+	4.1.23	Npm Address

简介

NativeWind 是一个专为 React Native 打造的样式库（Styling Library），而非组件库。它的核心作用是让开发者能够在 React Native 项目中使用熟悉的 Tailwind CSS 语法进行样式编写，从而提升开发体验和代码的可维护性。

下载安装

进入到工程目录并输入以下命令：

npm

npm install tailwindcss@^3.4.17
npm install @react-native-ohos/nativewind

yarn

yarn add tailwindcss@^3.4.17
yarn add @react-native-ohos/nativewind

tailwind.config.js

npx tailwindcss init

在你的 tailwind.config.js 文件中添加所有组件文件的路径。

• V2.0.11

module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}", "./screens/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

• V4.1.24

/** @type {import('tailwindcss').Config} */
module.exports = {
+ content: ["./src/*.{js,jsx,ts,tsx}"],
+ presets: [require("@react-native-ohos/nativewind/preset")],
  theme: {
    extend: {},
  },
  plugins: [],
}

修改你的 babel.config.js

• V2.0.11

module.exports = {
- plugins: [],
+ plugins: ["@react-native-oh-tpl/nativewind/babel"],
};

• V4.1.24

module.exports = {
- presets: [],
+ presets: ['@react-native-ohos/nativewind/babel'],
};

修改你的 metro.config.js。

const { getDefaultConfig } = require("expo/metro-config");
+ const { withNativeWind } = require('@react-native-ohos/nativewind/metro');
 
const config = getDefaultConfig(__dirname)
 
+ module.exports = withNativeWind(config, { input: './global.css' })

在工程根目录下创建CSS文件 global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

约束与限制

兼容性

本文档内容基于以下环境验证通过：

1. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;

使用示例

下面的代码展示了这个库的基本使用场景：

• V2.0.11

import React from 'react';
import { Text, View } from 'react-native';
import { styled } from 'nativewind';

const StyledView = styled(View)
const StyledText = styled(Text)
const NativewindDemo = () => {
    return (
        <StyledView className="flex-1 items-center justify-center">
            <StyledText className="font-bold">
                Hello,World.
            </StyledText>
        </StyledView>
    )
}

export default NativewindDemo

• V4.1.24⁺

import "../global.css"
import { Text, View } from 'react-native';
import { vars } from 'nativewind';

 
export default function App() {
  return (
    <View style={vars({ '--brand-color': 'red' })}>
        <Text className="text-[--brand-color]" >
            Welcome to Nativewind!
        </Text>
    </View>
  );
}

接口说明

属性

Name	Description	Type	Required	Platform	HarmonyOS Support
withNativeWind4.1.24+	withNativeWind 是一个高阶组件，用于更新你的 Metro 配置文件，以提供 NativeWind 框架支持。	component	no	All	yes
remapProps4.1.24+	NativeWind 提供了 remapProps 工具函数，简化对带有多个 style 属性的第三方组件的开发操作。	component	no	All	yes
cssInterop4.1.24+	该函数会给组件打上标记，这样组件渲染时，运行时就能识别并将组件的 className 字符串转换为样式。	component	no	All	yes

API

Name	Description	Type	Required	Platform	HarmonyOS Support
useColorScheme()	用于获取设备的配色方案信息。	() =>{colorScheme,setColorScheme}	no	All	yes
var4.1.24+	vars 是一个函数，接收一组 CSS 变量键值对象作为参数，并返回一个可在 React Native 组件中使用的样式对象。	function	no	All	yes

遗留问题

其他

无

目录结构

/rntpc_nativewind  # 项目根目录
├── packages              # 鸿蒙适配代码
│    └─ nativewind/src                  # 鸿蒙适配核心代码
│          └─ index.ets    # 鸿蒙适配代码入口    
│          └─ tailwind  
│              └─ index.ts  # nativewind核心实现             
├── README_en.md           # 英文安装使用方法    
├── README.md   # 中文安装使用方法                    

贡献代码

使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR 。

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。