Question

我正在基于以下文档研究Android中的自定义本机RN UI组件：https://reactnative.dev/docs/native-components-android

该组件在Android中扩展了TextView，目的是在Javascript中公开某些功能（例如，文本选择，简单的HTML样式）。

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

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

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

这将以黑色而非红色显示文本blah。如何从Android中的React Native的文本样式继承？其他样式规则（例如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);
    }
}

以下是重现该问题的回购链接：https://github.com/nsantacruz/CustomTextViewTest

Answer 1

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

结果代码应类似于：

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

自定义Native React Native UI组件，实现了文本样式

1 个答案: