NativeWind 会将 className 转化为 style 作为一个数组，它可以是一个单一的 style 对象吗

Question

我在我的项目中同时使用

NativeWind

和

twrnc

。
假设我有一个像这样的组件。

import tw from "twrnc";
...
const Test=(props)=>
{
  console.log(props);
  return <View style={tw.style(`border`,props.style)}>
    <Text>hello</Text>
  </View>
}

当我尝试像这样使用这个组件时

<Test className="bg-red-400 text-red-400" />

它将打印出这样的道具：

style: [{backgroundColor: '#f87171'},{color: '#f87171'}]

NativeWind 将类名转换为样式，但作为数组。
然后

tw.style

会弹出一个错误，提示

TypeError: str.trim is not a function (it is undefined) 

是否可以要求 NativeWind 不将类名转换为样式数组，而是单个样式对象？
例如，

style: {backgroundColor: '#f87171', color: '#f87171'}

Answer 1

在您的项目中，当同时使用 NativeWind 和 twrnc 时，当这些样式传递给 tw.style 时，NativeWind 将类名转换为样式数组可能会导致问题。为了解决这个问题，您可以手动将 styles 数组合并到单个对象中，然后再将其传递给 tw.style。

import React from 'react';
import { View, Text } from 'react-native';
import tw from 'twrnc';
import { StyleSheet } from 'react-native';

const mergeStyles = (styles) => {
  if (Array.isArray(styles)) {
    return styles.reduce((acc, style) => ({ ...acc, ...style }), {});
  }
  return styles;
};

const Test = (props) => {
  const mergedStyle = mergeStyles(props.style);
  return (
    <View style={tw.style(`border`, mergedStyle)}>
      <Text>hello</Text>
    </View>
  );
};

export default Test;

1. mergeStyles

   函数：该函数检查

   styles

   属性是否是一个数组。如果是，它将数组元素合并为一个对象。如果它已经是一个对象，则按原样返回该对象。

2. mergedStyle

   变量：该变量保存从

   mergeStyles

   函数获得的合并样式对象。
3. 将

   mergedStyle

   传递给

   tw.style

   ：然后将

   mergedStyle

   传递给

   tw.style

   ，以确保其正常工作而不会导致任何错误。

<Test className="bg-red-400 text-red-400" />

测试一下它是否会正确合并到单个对象中。

检查一下，它会起作用。