react native javascript react.js react-native渲染富文本的几种方案

前言

在日常开发中，经常需要用到富文本编辑器来编辑业务内容，例如新闻、论坛等，然后在用到的地方进行渲染，一般在web端可以直接在html中载入编辑好的内容（一般是一段html），不过在react-native的app中不能直接把html渲染进去，接下来我介绍几种渲染html的方案。

正文

1、使用已有的组件

既然已经有人造好了轮子，我们就直接拿来用就可以了。可以在网上搜 react-native 富文本组件，可以有几个选择方案，我这边以react-native-render-html，npm地址：www.npmjs.com/package/rea… ，

使用方法：

import RenderHTML , {IMGElementContainer, useIMGElementProps, useIMGElementState, IMGElement} from "react-native-render-html";

// 其他代码 ...

_previewImg = (src) => {const images = [{ uri : src}];Overlay.show((

{flex: 1}}overlayOpacity={1}ref={v => this.fullImageView = v}>

{flex: 1}}control={true}images={images}defaultIndex={0}onPress={() => {this.fullImageView && this.fullImageView.close()}}/>));

};

_imagesNode = (props) => {const imgElementProps = useIMGElementProps(props);return ();

};

render() {const styles = this.styles;const Props = this.props;return (

{html: this._handleContent(Props.data)}}renderers={

{img: this._imagesNode}}tagsStyles={

{p: {marginVertical: 5}}}{...Props}/>);

}

// 其他代码 ...

这个组件的原理就是把富文本的html标签一个个的解析出来，转换成react-native的标签，再进行渲染就可以了。

注意：如果需要点击放大预览的话，图片需要单独处理。

文章来源

 您阅读本篇文章共花了：