已开启
fix: 修改nativewind三方库72分支AI文档质量扫描整改 #21
fanwangah创建于 8月3日
fix: 修改nativewind三方库72分支AI文档质量扫描整改 #21
已开启
共 2 个文件变更+0-130
| @@ -53,20 +53,6 @@ module.exports = { | |||
| 53 | } | 53 | } |
| 54 | ``` | 54 | ``` |
| 55 | 55 | ||
| 56 | -- V4.1.24 | ||
| 57 | - | ||
| 58 | -```diff | ||
| 59 | -/** @type {import('tailwindcss').Config} */ | ||
| 60 | -module.exports = { | ||
| 61 | -+ content: ["./src/*.{js,jsx,ts,tsx}"], | ||
| 62 | -+ presets: [require("@react-native-ohos/nativewind/preset")], | ||
| 63 | - theme: { | ||
| 64 | - extend: {}, | ||
| 65 | - }, | ||
| 66 | - plugins: [], | ||
| 67 | -} | ||
| 68 | -``` | ||
| 69 | - | ||
| 70 | ### **修改你的 babel.config.js** | 56 | ### **修改你的 babel.config.js** |
| 71 | 57 | ||
| 72 | - V2.0.11 | 58 | - V2.0.11 |
| @@ -78,38 +64,6 @@ module.exports = { | |||
| 78 | }; | 64 | }; |
| 79 | ``` | 65 | ``` |
| 80 | 66 | ||
| 81 | -- V4.1.24 | ||
| 82 | - | ||
| 83 | -```diff | ||
| 84 | -module.exports = { | ||
| 85 | -- presets: [], | ||
| 86 | -+ presets: ['@react-native-ohos/nativewind/babel'], | ||
| 87 | -}; | ||
| 88 | -``` | ||
| 89 | - | ||
| 90 | -### **修改你的 metro.config.js。** | ||
| 91 | - | ||
| 92 | -> [!TIP] V4.1.24 需要修改你的 metro.config.js。 | ||
| 93 | - | ||
| 94 | -```diff | ||
| 95 | -const { getDefaultConfig } = require("expo/metro-config"); | ||
| 96 | -+ const { withNativeWind } = require('@react-native-ohos/nativewind/metro'); | ||
| 97 | - | ||
| 98 | -const config = getDefaultConfig(__dirname) | ||
| 99 | - | ||
| 100 | -+ module.exports = withNativeWind(config, { input: './global.css' }) | ||
| 101 | -``` | ||
| 102 | - | ||
| 103 | -### 在工程根目录下创建CSS文件 global.css | ||
| 104 | - | ||
| 105 | -> [!TIP] >=V4.1.24 创建CSS文件 global.css。 | ||
| 106 | - | ||
| 107 | -``` | ||
| 108 | -@tailwind base; | ||
| 109 | -@tailwind components; | ||
| 110 | -@tailwind utilities; | ||
| 111 | -``` | ||
| 112 | - | ||
| 113 | ## 约束与限制 | 67 | ## 约束与限制 |
| 114 | 68 | ||
| 115 | ### 兼容性 | 69 | ### 兼容性 |
| @@ -146,25 +100,6 @@ const NativewindDemo = () => { | |||
| 146 | export default NativewindDemo | 100 | export default NativewindDemo |
| 147 | ``` | 101 | ``` |
| 148 | 102 | ||
| 149 | -- V4.1.24<sup>+</sup> | ||
| 150 | - | ||
| 151 | -```jsx | ||
| 152 | -import "../global.css" | ||
| 153 | -import { Text, View } from 'react-native'; | ||
| 154 | -import { vars } from 'nativewind'; | ||
| 155 | - | ||
| 156 | - | ||
| 157 | -export default function App() { | ||
| 158 | - return ( | ||
| 159 | - <View style={vars({ '--brand-color': 'red' })}> | ||
| 160 | - <Text className="text-[--brand-color]" > | ||
| 161 | - Welcome to Nativewind! | ||
| 162 | - </Text> | ||
| 163 | - </View> | ||
| 164 | - ); | ||
| 165 | -} | ||
| 166 | -``` | ||
| 167 | - | ||
| 168 | ## 接口说明 | 103 | ## 接口说明 |
| 169 | 104 | ||
| 170 | > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 | 105 | > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 |
| @@ -53,20 +53,6 @@ module.exports = { | |||
| 53 | } | 53 | } |
| 54 | ``` | 54 | ``` |
| 55 | 55 | ||
| 56 | -- V4.1.24 | ||
| 57 | - | ||
| 58 | -```diff | ||
| 59 | -/** @type {import('tailwindcss').Config} */ | ||
| 60 | -module.exports = { | ||
| 61 | -+ content: ["./src/*.{js,jsx,ts,tsx}"], | ||
| 62 | -+ presets: [require("@react-native-ohos/nativewind/preset")], | ||
| 63 | - theme: { | ||
| 64 | - extend: {}, | ||
| 65 | - }, | ||
| 66 | - plugins: [], | ||
| 67 | -} | ||
| 68 | -``` | ||
| 69 | - | ||
| 70 | ### **Modify your `babel.config.js`** | 56 | ### **Modify your `babel.config.js`** |
| 71 | 57 | ||
| 72 | - V2.0.11 | 58 | - V2.0.11 |
| @@ -78,38 +64,6 @@ module.exports = { | |||
| 78 | }; | 64 | }; |
| 79 | ``` | 65 | ``` |
| 80 | 66 | ||
| 81 | -- V4.1.24 | ||
| 82 | - | ||
| 83 | -```diff | ||
| 84 | -module.exports = { | ||
| 85 | -- presets: [], | ||
| 86 | -+ presets: ['@react-native-ohos/nativewind/babel'], | ||
| 87 | -}; | ||
| 88 | -``` | ||
| 89 | - | ||
| 90 | -### **Modify your `metro.config.js`** | ||
| 91 | - | ||
| 92 | -> [!TIP] V4.1.24<sup>+</sup> Modify your `metro.config.js`. | ||
| 93 | - | ||
| 94 | -```diff | ||
| 95 | -const { getDefaultConfig } = require("expo/metro-config"); | ||
| 96 | -+ const { withNativeWind } = require('@react-native-ohos/nativewind/metro'); | ||
| 97 | - | ||
| 98 | -const config = getDefaultConfig(__dirname) | ||
| 99 | - | ||
| 100 | -+ module.exports = withNativeWind(config, { input: './global.css' }) | ||
| 101 | -``` | ||
| 102 | - | ||
| 103 | -### **Create a CSS file named `global.css` in the project root directory** | ||
| 104 | - | ||
| 105 | -> [!TIP] >=V4.1.24<sup>+</sup> Create the CSS file `global.css`. | ||
| 106 | - | ||
| 107 | -``` | ||
| 108 | -@tailwind base; | ||
| 109 | -@tailwind components; | ||
| 110 | -@tailwind utilities; | ||
| 111 | -``` | ||
| 112 | - | ||
| 113 | ## Constraints | 67 | ## Constraints |
| 114 | 68 | ||
| 115 | ### Compatibility | 69 | ### Compatibility |
| @@ -146,25 +100,6 @@ const NativewindDemo = () => { | |||
| 146 | export default NativewindDemo | 100 | export default NativewindDemo |
| 147 | ``` | 101 | ``` |
| 148 | 102 | ||
| 149 | -- V4.1.24<sup>+</sup> | ||
| 150 | - | ||
| 151 | -```jsx | ||
| 152 | -import "../global.css" | ||
| 153 | -import { Text, View } from 'react-native'; | ||
| 154 | -import { vars } from 'nativewind'; | ||
| 155 | - | ||
| 156 | - | ||
| 157 | -export default function App() { | ||
| 158 | - return ( | ||
| 159 | - <View style={vars({ '--brand-color': 'red' })}> | ||
| 160 | - <Text className="text-[--brand-color]" > | ||
| 161 | - Welcome to Nativewind! | ||
| 162 | - </Text> | ||
| 163 | - </View> | ||
| 164 | - ); | ||
| 165 | -} | ||
| 166 | -``` | ||
| 167 | - | ||
| 168 | ## Available APIs | 103 | ## Available APIs |
| 169 | 104 | ||
| 170 | > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. | 105 | > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. |