使用react-native-render-html实现React Native溢出文本底部渐变效果

方案1：外层容器嵌套实现（无需修改现有HTML结构，更简洁） #

你之前把渐变组件放在RenderHtml下方不生效，是因为没有给二者套一层相对定位的父容器作为定位参照，改法如下：

1. 给组件外层包一个高度固定300、position: 'relative'的View
2. LinearGradient组件和RenderHtml平级放置，设置绝对定位在容器底部，zIndex高于渲染内容，同时添加pointerEvents="none"避免拦截下方文本的点击事件
   修改后的组件返回部分示例：

return (
  <View style={{ height: 300, position: 'relative', overflow: 'hidden' }}>
    <RenderHtml
      contentWidth={width}
      source={{
        html: wrapHTMLInBody(
          '<p>Miss polly had a dolly that was sick sick sick</p>Miss polly had a dolly that was sick sick sick</p>Miss polly had a dolly that was sick sick sick</p>',
        ),
      }}
      tagsStyles={tagsStyles(theme)}
      customHTMLElementModels={customHTMLElementModels(props.style, props.scrollEnabled, theme, props.padding)}
      systemFonts={systemFonts}
    />
    <LinearGradient
      colors={theme.isDark ? ['rgba(0,0,0,0)', 'rgba(0,0,0,1)'] : ['rgba(255,255,255,0)', 'rgba(255,255,255,1)']}
      style={{
        position: 'absolute',
        left: 0,
        bottom: 0,
        width: '100%',
        height: 100,
      }}
      pointerEvents="none"
    />
  </View>
);

这个方案不需要保留你现有的scrollfade相关的自定义元素模型、HTML里的scrollfade标签，直接删除即可。

方案2：自定义标签渲染器实现（适配你现有scrollfade标签结构） #

react-native-render-html支持通过renderers属性为自定义标签指定原生渲染组件，你之前只定义了scrollfade的元素模型，没有绑定实际的渲染逻辑，所以无法渲染渐变，改法如下：

1. 导入自定义渲染器类型

import RenderHtml, {
  defaultSystemFonts,
  HTMLContentModel,
  HTMLElementModel,
  MixedStyleRecord,
  CustomRendererProps, // 新增导入
} from 'react-native-render-html';

2. 定义scrollfade标签的渲染配置

const renderers = {
  scrollfade: (props: CustomRendererProps<any>) => {
    const theme = useTheme();
    return (
      <LinearGradient
        colors={theme.isDark ? ['rgba(0,0,0,0)', 'rgba(0,0,0,1)'] : ['rgba(255,255,255,0)', 'rgba(255,255,255,1)']}
        style={{
          width: '100%',
          height: 100,
        }}
        pointerEvents="none"
      />
    );
  }
};

3. 给RenderHtml组件添加renderers属性

<RenderHtml
  // 其他原有属性保持不变
  renderers={renderers}
/>

这个方案适配你现有的HTML结构，适合容器高度动态变化的场景。

注意事项 #

• 渐变高度可以按需调整，一般设置80-120即可达到自然的过渡效果
• 必须给渐变层添加pointerEvents="none"，否则下方HTML中的链接、可点击元素会无法响应交互
• 渐变颜色可以根据你的主题配置灵活调整，保证和背景色过渡自然

内容的提问来源于stack exchange，提问作者Squiggs.