最近在開發(fā)React Native功能模塊時淤堵，服務(wù)端下發(fā)了一個需要顯示的HTML標簽琳省，經(jīng)過摸索實驗，發(fā)現(xiàn)了一個非常好用的第三方組件-HTMLView汰聋。HTMLView是一個可以使用HTML內(nèi)容并將其渲染為Native視圖的第三方組件无埃，它具有自定義樣式和鏈接處理等特性徙瓶。

1. 安裝

使用npm包管理工具安裝第三方組件庫HTMLView。

npm install react-native-htmlview --save

2. 用法

Props：

HtmlView.propTypes = {
  addLineBreaks: PropTypes.bool,
  bullet: PropTypes.string,
  lineBreak: PropTypes.string,
  NodeComponent: PropTypes.func,
  nodeComponentProps: PropTypes.object,
  onError: PropTypes.func,
  onLinkPress: PropTypes.func,
  onLinkLongPress: PropTypes.func,
  paragraphBreak: PropTypes.string,
  renderNode: PropTypes.func,
  RootComponent: PropTypes.func,
  rootComponentProps: PropTypes.object,
  style: ViewPropTypes.style,
  stylesheet: PropTypes.object,
  TextComponent: PropTypes.func,
  textComponentProps: PropTypes.object,
  value: PropTypes.string,
};

HtmlView.defaultProps = {
  addLineBreaks: true,
  onLinkPress: url => Linking.openURL(url),
  onLinkLongPress: null,
  onError: console.error.bind(console),
  RootComponent: element => <View {...element} />, // eslint-disable-line react/display-name
};

上面這些就是HTMLView所具有的prop嫉称，常用如下：

• value：要顯示的HTML內(nèi)容字符串
• onLindPress：點按HTMLView的鏈接時會通過url調(diào)用這個函數(shù)侦镇，通過這個屬性將會覆蓋鏈接的處理方式（默認調(diào)用Linking.openURL(url)）。
• onLinkLongPress：長按HTMLView的鏈接時通過url調(diào)用這個函數(shù)织阅。默認值為null壳繁。
• stylesheet：一個由標簽名稱作為鍵值的樣式表對象，它將覆蓋應(yīng)用于相應(yīng)標簽的樣式。

3. 例子

import React,{Component} from 'react'
import {StyleSheet} from 'react-native'
import HTMLView from 'react-native-htmlview';

class App extends React.Component {
  render() {
    var agreeContent = '<p>請查看<a  target="_blank">隱私條款</a><br></p>';
    return (
      <HTMLView
        value={agreeContent}
        stylesheet={styles}
        onLinkPress={(url) => this._loadWebView(url)}
      />
    );
  }
  _loadWebView(url) {
    // 打開url
  }
}
 
const styles = StyleSheet.create({
  p:{
    fontSize:11,
    marginTop:2.5,
    marginLeft:5
  },
  a:{
    color:'#FF6700'
  }
});

注意：要修改HTMLView組件的內(nèi)容樣式闹炉，只能通過stylesheet這個prop蒿赢。如樣例所示通過標簽名作為鍵值的樣式表對象去改變THMLView組件的內(nèi)容樣式。

參考

react-native-htmlview