同时使用NativeWind与twrnc，能否让其输出单个style对象而非数组？

问题场景 #

项目同时使用NativeWind与twrnc，现有组件代码：

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

使用该组件时传入NativeWind的className：

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

此时NativeWind会将className转换为style数组：style: [{backgroundColor: '#f87171'},{color: '#f87171'}]，但twrnc的tw.style方法无法处理数组类型的参数，抛出错误：TypeError: str.trim is not a function (it is undefined)。

解决方案 #

方法1：组件内手动合并style数组为单个对象 #

在组件内部将传入的style数组合并成一个对象后，再传给tw.style。可以用Object.assign或扩展运算符实现：

import tw from "twrnc";
...
const Test=(props)=>
{
  // 处理style：数组则合并为单个对象，非数组直接使用
  const mergedStyle = Array.isArray(props.style) 
    ? Object.assign({}, ...props.style) 
    : props.style;
  
  return <View style={tw.style(`border`, mergedStyle)}>
    <Text>hello</Text>
  </View>
}

这样tw.style就能正常接收合并后的对象参数，避免触发错误。

方法2：封装通用工具函数处理样式合并 #

如果多个组件都存在这个兼容需求，可以封装一个复用工具函数：

// utils/styleHelper.js
export const mergeStyleArray = (style) => {
  if (!Array.isArray(style)) return style;
  // 遍历数组合并所有样式对象，后项属性会覆盖前项
  return style.reduce((acc, curr) => ({ ...acc, ...curr }), {});
}

在组件中引入使用：

import tw from "twrnc";
import { mergeStyleArray } from './utils/styleHelper';
...
const Test=(props)=>
{
  const mergedStyle = mergeStyleArray(props.style);
  return <View style={tw.style(`border`, mergedStyle)}>
    <Text>hello</Text>
  </View>
}

补充说明 #

NativeWind默认会将多类名对应的样式拆分为数组形式，目前没有直接配置项让它输出单个合并对象，因此手动合并是最直接的兼容方案。合并时若出现重复样式属性，后序对象的属性会覆盖前序，这与React style数组的优先级规则一致。

内容的提问来源于stack exchange，提问作者Kent Wood