react-native中react-native-render-html的使用（不崩溃）

1、react-native-render-html和react-native-htmlview的比较

App项目中需要用到解析HTML的组件，在github上面找到比较合适的两款，react-native-render-html（RNRH）和react-native-htmlview（RNH）。子啊实际的使用过程中，两个各自有不同的问题。

首先RNRH容易红屏，这个使用过的人肯定有体会，而RNH则在图片方面比较不好处理，最终我选择了RNRH。

2、使用

安装什么的就不说了

import HTML from "react-native-render-html";

然后在组件的render中

<HTMLignoredStyles={["font-family", "transform", "display", "border-style", "max-width", "default-src", "loadingIndicatorSrc"]}renderers={renderer}debug={true}tagsStyles={{p: {fontSize: 16}, span: {fontSize: 16}}}html={this.state.htmlContent}imagesMaxWidth={width}/>

注意组件的ignoredStyles属性，这里配置的是需要忽略的css属性，很多导致崩溃的原因就是有些css属性无法解析。所以使用过程中，查看日志很重要，哪个属性导致的崩溃，可以添加在这里。

renderers的写法如下，主要处理图片

const width = Dimensions.get('window').width;
const renderer = {img: (htmlAttribs, children, convertedCSSStyles, passProps) => {const wid = htmlAttribs.width ? htmlAttribs.width : width;const hei = htmlAttribs.height ? htmlAttribs.height * (width - 20) / wid : 200;console.log(htmlAttribs.src);imageArr.push({index: i, uri: htmlAttribs.src});//将图片放入overlay中点击查看this.setState({images: imageArr});i++;return (<TouchableNativeFeedbackkey={i}onPress={() => {let index = 0;this.state.images.map((item) => {if (item.uri === htmlAttribs.src) {index = item.index;}});this.setState({overLayVisible: true,overLayImageIndex: index});}}><Imagekey={htmlAttribs.src}style={{height: hei, width: width - 20}}resizeMode='contain'source={{uri: htmlAttribs.src}}/></TouchableNativeFeedback>)},ul: (htmlAttribs, children, passProps) => {return <Text style={{fontWeight: 'normal',marginLeft: 10,paddingLeft: 0,color: '#333',fontSize: 14,fontFamily: 'roboto_slab'}} {...passProps}>{children}</Text>},
};

采用这种方式可以保持图片原来的长宽比，不是导致图片失真或者变形。

另外我的后台文本编辑器为百度的Ueditor，两者配合基本满分。

react-native中react-native-render-html的使用（不崩溃）相关推荐

react navigation中使用goBack返回指定页面
goBack 首先, 现在看一下react navigation官网中对goBack的描述: goBack的参数为页面的key, 这个key是系统随机分配的, 而不是手动设置的routeName, 所 ...
native react 折线图_react native中使用echarts
开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...
React Native中pointerEvent属性
在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件.这是因为绝对定位只是说这个组件的位置由它父组件的边框决定. 绝对定位的组件可以被认 ...
Android之React Native 中组件的生命周期
React Native 中组件的生命周期概述就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对 ...
android 倒计时封装,react native中的聊天气泡及timer封装成的发送验证码倒计时
其实,今天我想把我近期遇到的坑都总结一下: 1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions 2.父子组件的传值,一可 ...
如何在React Native中创建精美的动画加载器
by Vikrant Negi 通过Vikrant Negi 如何在React Native中创建精美的动画加载器 (How to create a beautifully animated load ...
如何在React Native中构建项目并管理静态资源
by Khoa Pham 通过Khoa Pham 如何在React Native中构建项目并管理静态资源 (How to structure your project and manage stati ...
在React / React Native中使用构造函数与getInitialState有什么区别？
本文翻译自:What is the difference between using constructor vs getInitialState in React / React Native? I ...
React Native中的TextInput (补充)
React Native中的TextInput (补充) TextInput 的属性: import React, { Component } from 'react'; import { AppRe ...
在 React Native 中实现 3D 动画
本文的范围将涵盖对 Three.js 库和 Animated API 的探索. 您应该具备 JavaScript 和 React Native 的基本知识才能继续学习: 要了解更多关于可以在 Reac ...

react-native中react-native-render-html的使用（不崩溃）

1、react-native-render-html和react-native-htmlview的比较

2、使用

react-native中react-native-render-html的使用（不崩溃）相关推荐

最新文章

热门文章