时间戳

首页 > 解决方案 > 实现文本样式的自定义 Native React Native UI 组件

javascript - 实现文本样式的自定义 Native React Native UI 组件

问题描述

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

该组件TextView在 Android 中扩展，以便在 Javascript 中公开一些功能（例如文本选择、简单的 HTML 样式）。

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

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

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

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

下面是我CustomTextView在 Java 中的实现

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

标签： javascriptandroidreact-native

解决方案

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

结果代码应如下所示：

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

推荐阅读