Styled.宏：Reaction Native的实用程序优先样式库

免责声明：这个图书馆只有几天/几周的历史。当它工作时，它被认为是测试版。

🍂占用空间最小：从未使用过的样式不会出现在最终的应用程序捆绑包中。

//babel.config.js模块。EXPORTS=Function(API){return{plugins：['；macs'；]，//...。其他物品}；}；

导入样式来自'；Reaction-Native-Styled.宏；常量标题=({text})=>；(<；text{...。Style(['；My-4'；，'；Text-2xl'；，'；Text-Grey-900&39；，'；font-Semibold'；，'；Letter-Wide'；，])}>；{Text}<；/Text>；)；

从'；REACT-Native；+IMPORT{StyleSheet}从'；REACT-Native'；+IMPORT{rem}从'；REACT-Native-Styled.宏'；；+常量样式=StyleSheet.create({+_Default：{+Margtical：REM(1)，+FontSize：REM(1)，+'；react-native-styled.macro/path/not/relevant'；；：REM(1.5)，+COLOR：'；#1a202c'；，+fontWeight：'；600&39；，+字母间距：rem(0.025)，+}，+})；常量标题=({text})=>；(<；text-{...style led([-'；my-4'；，-'；text-2xl'；，-'；text-grey-900'；，-'；font-semibold'；，-'；Letter-Wide'；，-])}+{...{+style：Styles._Default，+}}>；{text}<；/text>；)；

样式化(您可以任意命名)是一个Babel宏，这意味着它将在编译期间执行。

如果可能的话，它将尝试合并相同变体的样式，这样我们就不会最终为每个样式(例如text-2xl)创建一个对象。

为了获得最佳性能，它将使用好的/旧的StyleSheet.create来创建样式，就像您通常应该在Reaction Native应用程序中自己做的那样。

您编写的任何代码的输出看起来都与上面的大致相同。唯一的例外是具有多个变体的样式，因为我们需要添加逻辑来在运行时切换样式(与您使用Platform.select()一样)。

构建在Reaction Native的useWindowDimensions钩子的顶部。可能的键：sm、md、lg、xl或自定义值(见下文)。

从'；REACT-NATIVE-STYLED.宏；IMPORT{useWindowVariant}从'；REACT-NATIVE-STYLLEd.宏/lib'；；const MyComponent=()=>；{const windowVariant=useWindowVariant()；return(<；text{...。样式(['；w-Full&39；，'；MD：W-64&39；]，{...。WindowVariant/*其他变体*/，})}>；我的文本<；/text>；)；}；

//注意：传递自定义对象会移除默认断点，如`sm`。使用WindowVariant({Tablet：640，Laptop：768，//..。任何真正的东西})；//稍后使用(['；Tablet：W-Full&39；，'；Laptop：W-64&39；])；

由于Styled接受任意键作为支持深色模式的变体，因此可以按如下方式轻松获得：

从'；REACT-NATIVE'；IMPORT STYLED FROM'；REACT-NATIVE-STYLLED'；导入{useColorScheme}；const MyComponent=()=>；{//可以是'；Dark'；或'；light'；Const ColorScheme=useColorScheme()；return(<；text{...。Style(['；Text-Black&39；，'；Dark：Text-White&39；]，{Dark：ColorScheme='；Dark&39；，})}>；我的文本<；/Text>；)；}；

顺风CSS(网站)：顺风是一个很棒的实用优先的CSS框架。我们从那里借用了实用程序优先的方法，并重新设想了如何在Reaction Native应用程序中使用它来更快地构建用户界面，而无需额外的运行时开销。