React Native中Android端如何实现文字双下划线效果？

因为React Native的textDecorationStyle属性仅iOS端支持，Android端没有原生对应实现，以下是几种可行的替代方案：

方案一：自定义组件叠加线条（通用方案） #

通过在文本下方叠加多个View模拟双下划线，这种方式无需依赖第三方库，灵活可控。

示例代码：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const DoubleUnderlineText = ({ children, style, lineColor = '#000', lineHeight = 1, lineGap = 2 }) => {
  const textStyle = StyleSheet.flatten(style);
  return (
    <View style={{ position: 'relative', display: 'inline-block' }}>
      <Text style={style}>{children}</Text>
      {/* 第一条下划线 */}
      <View
        style={[
          styles.line,
          {
            backgroundColor: lineColor,
            height: lineHeight,
            bottom: lineHeight + lineGap,
          },
        ]}
      />
      {/* 第二条下划线 */}
      <View
        style={[
          styles.line,
          {
            backgroundColor: lineColor,
            height: lineHeight,
            bottom: 0,
          },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  line: {
    position: 'absolute',
    left: 0,
    right: 0,
  },
});

// 使用示例
const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
      <DoubleUnderlineText style={{ fontSize: 20 }}>这是双下划线文本</DoubleUnderlineText>
    </View>
  );
};

export default App;

你可以通过调整lineHeight（线条粗细）和lineGap（线条间距）适配不同需求，同理也能修改为虚线、点线样式——给View添加borderStyle: 'dashed'或'dotted'，同时用borderBottomWidth代替背景色即可。

方案二：使用富文本渲染 #

借助支持HTML/CSS的富文本组件（如react-native-render-html），利用Web端CSS的text-decoration-style属性实现，Android的WebView内核支持该样式。

示例代码：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import RenderHtml from 'react-native-render-html';

const App = () => {
  const htmlContent = `
    <span style="text-decoration: underline; text-decoration-style: double; font-size: 20px;">这是双下划线文本</span>
    <br/>
    <span style="text-decoration: underline; text-decoration-style: dashed; font-size: 20px;">这是虚线下划线文本</span>
  `;

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
      <RenderHtml contentWidth={300} source={{ html: htmlContent }} />
    </View>
  );
};

export default App;

这种方案适合复杂文本装饰场景，但性能略低于原生组件，使用前需要先安装对应的富文本组件。

方案三：扩展Android原生模块（高性能方案） #

如果需要原生级别的性能，可自定义Android原生TextView，通过Paint绘制自定义下划线样式，再封装为React Native组件。

核心原生代码示例（Android端）：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.text.TextPaint;
import android.util.AttributeSet;
import androidx.appcompat.widget.AppCompatTextView;

public class CustomUnderlineTextView extends AppCompatTextView {
    private Paint underlinePaint;
    private float underlineGap = 4f; // 双下划线间距
    private float underlineThickness = 1f; // 线条粗细

    public CustomUnderlineTextView(Context context) {
        super(context);
        init();
    }

    public CustomUnderlineTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        underlinePaint = new Paint();
        underlinePaint.setColor(getCurrentTextColor());
        underlinePaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        TextPaint textPaint = getPaint();
        float baseline = getBaseline();
        float descent = textPaint.descent();
        
        // 绘制第一条下划线
        canvas.drawRect(0, baseline + descent, getWidth(), baseline + descent + underlineThickness, underlinePaint);
        // 绘制第二条下划线
        canvas.drawRect(0, baseline + descent + underlineThickness + underlineGap, getWidth(), baseline + descent + 2*underlineThickness + underlineGap, underlinePaint);
    }

    // 提供方法设置间距和粗细，供RN端调用
    public void setUnderlineGap(float gap) {
        underlineGap = gap;
        invalidate();
    }

    public void setUnderlineThickness(float thickness) {
        underlineThickness = thickness;
        invalidate();
    }
}

之后通过React Native的原生模块桥接，将该组件暴露给RN端使用，这种方案适合频繁使用自定义下划线的场景，性能最优。

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