文章/答案/技术大牛

发布

社区首页 >问答首页 >实现文本样式的自定义Native React Native UI组件

问实现文本样式的自定义Native React Native UI组件
EN

Stack Overflow用户

提问于 2020-03-31 23:46:30

回答 1查看 195关注 0票数 2

我正在基于这些文档在安卓中开发一个自定义的原生RN UI组件：https://reactnative.dev/docs/native-components-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);
    }
}

以下是复制此问题的repo的链接：https://github.com/nsantacruz/CustomTextViewTest

javascript

android

react-native

回答 1

Stack Overflow用户

发布于 2020-11-27 06:20:45

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

结果代码应该如下所示：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60954541

复制

相似问题

问实现文本样式的自定义Native React Native UI组件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实现文本样式的自定义Native React Native UI组件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问实现文本样式的自定义Native React Native UI组件
EN