React Native Android原生组件是否需手动实现View Style Props

核心结论 #

你不需要手动通过@ReactProp或@ReactPropGroup逐个实现borderColor、borderWidth、width这类标准View样式属性，Android端样式失效的根本原因是你的组件直接继承了原生LinearLayout，没有接入React Native的原生组件基类逻辑。

原理说明 #

React Native不会自动给直接继承原生Android View的组件注入标准样式处理能力，所有官方内置的样式（边框、宽高、内边距、圆角、背景、变换等）的解析、应用、更新逻辑，都封装在RN自己的原生容器基类里：

• iOS端默认的原生组件基类已经内置了全量标准样式处理，所以你写的样式在iOS端可以正常生效
• Android端如果直接继承原生LinearLayout，RN框架不会把解析完成的样式值应用到你的自定义组件上，不管你写什么样式都不会生效，和你写的样式语法本身没有关系

修复方案 #

把Android端MyNativeUIComponent的父类从原生android.widget.LinearLayout替换为RN提供的com.facebook.react.views.view.ReactViewGroup即可。
这个基类已经内置了所有标准View样式的处理逻辑，替换之后所有你写在style里的标准属性都会自动生效，不需要额外写任何属性暴露或样式处理代码。
需要注意的是，React Native的Android端布局是由Yoga引擎计算驱动的，原生LinearLayout的orientation、weight这类布局属性本身就不会在RN的渲染流程里生效，替换成ReactViewGroup不会损失你在RN侧需要的布局能力。

避坑提示 #

• 不要手动写@ReactProp去实现边框、宽高这类基础样式，RN的边框逻辑涉及多段边框色、圆角裁剪、overflow处理、动画更新等大量边界逻辑，自行实现很容易出现显示异常，还会和后续RN版本的内部逻辑冲突
• 如果你因为特殊业务需求必须继承原生LinearLayout，需要自行在组件里初始化ReactViewBackgroundManager实例，把边框、背景相关的属性设置委托给这个manager处理，同时手动同步Yoga计算出来的布局参数，这种方案维护成本极高，非极端场景不推荐
• 修改完原生代码后记得全量重新编译Android包，清除构建缓存后再测试，避免旧的类缓存导致修改不生效

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