实现文本 styles 的自定义 Native React Native UI 组件

Question

我正在根据这些文档在 Android 中开发自定义原生 RN UI 组件： https://reactnative.dev/docs/native-components-android

该组件在TextView中扩展了 TextView 并为了在 Javascript 中公开一些功能（例如文本选择，简单的 Z4C4AD5FCA2E7A3FAA4ZDBB 样式）。

我面临的问题是我似乎无法让文本样式正常工作。 假设我的组件名为CustomTextView

在 React Native 中，我希望我可以做到：

<CustomTextView style={{color: 'red'}} text="blah"/>

这将以黑色而不是红色显示文本blah 。 如何从 Android 中的 React Native 的文本 styles 继承？ 其他样式规则（例如width 、 height ）可以正常工作。

下面是我在 Java 中实现CustomTextView

CustomTextViewManager.java

public class CustomTextViewManager extends SimpleViewManager<TextView> {
    public static final String REACT_CLASS = "RCTCustomTextView";
    @Override
    public String getName() { return REACT_CLASS; }

    @Override
    public TextView createViewInstance(ThemedReactContext context){
        TextView view = new TextView(context);
        view.setTextIsSelectable(true);
        return view;
    }

    @ReactProp(name = "text")
    public void setText(TextView view, String text) {
        Spanned spanned;
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            spanned = Html.fromHtml(text, Html.FROM_HTML_MODE_COMPACT);
        } else {
            spanned = Html.fromHtml(text);
        }
        view.setText(spanned);
    }
}

这是重现该问题的 repo 的链接： https://github.com/nsantacruz/CustomTextViewTest

Answer 1

我没有找到任何文档，但对我来说添加flex: 1到样式有帮助。

结果代码应该是这样的：

<CustomTextView
  style={{
    color: 'red',
    flex: 1,
  }}
  text="blah"
/>

Answer 2

在您的视图管理器中创建一个反应道具

@ReactProp(name = "textColor")
  fun setTextColor(view: View, color: String) {
    textView.setTextColor(Color.parseColor(color))
  }