RN 环境下， 单条 className 值有多个类名时，子组件接受的是 array 类型的style，期望得到的是 合并 后的style

[croatialu]

相关平台

React Native

使用框架: React

复现步骤

// Parent:

<Node  className="name1 name2 name3" />

// => 会转成

<Node  style={[ xxx1, xxx2, xxx3 ]} />

// Child:

console.log(props.style) // => [ { ... }, { ... } , { ... } ]

当子组件想要加些样式继续往下传递的时候：

const innerStyle = { ...props.style,  ...innerCustomStyle }
// props.style 是数组， 导致样式作用失败

期望结果

期望在 上层 className 转 style 之后， 再对style 进行一次合并处理

<Node  style={[ xxx1, xxx2, xxx3 ]} />

// => 

<Node style={merge([ xxx1, xxx2, xxx3 ])} />


function merge(styleArr) {
  return [].concat(styleArr).reduce((result, style) => {
    return Object.assign(result, style)
  }, {})
}

大概这个样子

实际结果

<Node style={merge([ xxx1, xxx2, xxx3 ])} />

环境信息

Taro CLI 3.2.13 environment info:
    System:
      OS: macOS 11.4
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.17.1 - /usr/local/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.14.13 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.2.13 => 3.2.13
      @tarojs/components: 3.2.13 => 3.2.13
      @tarojs/mini-runner: 3.2.13 => 3.2.13
      @tarojs/react: 3.2.13 => 3.2.13
      @tarojs/runtime: 3.2.13 => 3.2.13
      @tarojs/taro: 3.2.13 => 3.2.13
      @tarojs/webpack-runner: 3.2.13 => 3.2.13
      babel-preset-taro: 3.2.13 => 3.3.1
      react: 17.0.2 => 17.0.2
      react-native: 0.64.0 => 0.64.0
      taro-ui: 3.0.0-alpha.3 => 3.0.0-alpha.3
    npmGlobalPackages:
      typescript: 4.3.5

[shinken008]

首先这应当成特性来看待，需要考虑一下，最好提个特性的 issue 讨论

其次我们在 className 转成 style，转成符合 rn 的 style 的写法。支持接收一个数组或者对象，对数组和对象再往下层进行传递，合并的时候应该在使用层面去做判断合并。使用层如果需要往下传递， rn 的组件应该支持到 style 两种写法

[croatialu]

首先这应当成特性来看待，需要考虑一下，最好提个特性的 issue 讨论

其次我们在 className 转成 style，转成符合 rn 的 style 的写法。支持接收一个数组或者对象，对数组和对象再往下层进行传递，合并的时候应该在使用层面去做判断合并。使用层如果需要往下传递， rn 的组件应该支持到 style 两种写法

那就是每个组件都需要针对 style 去做同样的操作，加入特有样式， 再往下传递了。

不过这在我们使用的时候去做， 我们也是会把这个数组合并成对象往下传递。
一是心智负担低点， 对于style 就只需要认定是一个对象。再一个就是对于 h5，weapp 这边， 也是默认的把传递过来的style 作为一个对象，并且只能是对象

[shinken008]

我明白你的意思，统一的写法的方法有很多，可以提供一个 babel 插件，把 style 统一进行处理下，修改 className 转 style 的逻辑并不能从根上解决这个问题

自己写一个插件追加对 style attribute 的处理，社区找找或者晚几天等我写一个处理 style 的插件

[croatialu]

再单独整一个插件出来做这个事情吗

[shinken008]

是的，插件功能独立，用户可以选择是否使用它

[croatialu]

明白， 这样确实好点