zoukankan      html  css  js  c++  java
  • react native中使用 react-native-easy-toast 和react-native-htmlview

    第一步,下载依赖

    npm install react-native-htmlview --save
    
    npm install react-native-easy-toast --save

    第二步,引入

    import Toast, {DURATION} from 'react-native-easy-toast'
    import HTMLView from 'react-native-htmlview';

    第三步,使用

    export default class App extends Component{
        render(){
            const htmlContent = `<p><a href="https://www.cnblogs.com/ldlx-mars/p/9360650.html">火星黑洞</a></p>`;
            return(
                <View>
                    <Text onPress={()=>{this.refs.toast.show('hello world!',500)}}>我是首页</Text>
                    <Toast ref="toast" position='center' opacity={.8}/>
                    <HTMLView
                        value={htmlContent}
                        stylesheet={styles}
                    />
                </View>
            )
        }
    }

    然后执行项目

    完整代码是,app.js

    import React, { Component } from 'react';
    import {  StyleSheet,View,Text } from 'react-native';
    import Toast, {DURATION} from 'react-native-easy-toast'
    import HTMLView from 'react-native-htmlview';
    export default class App extends Component{
        render(){
            const htmlContent = `<p><a href="https://www.cnblogs.com/ldlx-mars/p/9360650.html">火星黑洞</a></p>`;
            return(
                <View>
                    <Text onPress={()=>{this.refs.toast.show('hello world!',500)}}>我是首页</Text>
                    <Toast ref="toast" position='center' opacity={.8}/>
                    <HTMLView
                        value={htmlContent}
                        stylesheet={styles}
                    />
                </View>
            )
        }
    }
    
    const styles = StyleSheet.create({
        a: {
          fontWeight: '300',
          color: '#FF3366',
        },
    });
  • 相关阅读:
    实验吧之snake
    实验吧之Canon
    实验吧之紧急报文
    实验吧之deeeeeeaaaaaadbeeeeeeeeeef-200
    Centos Linux 使用Yum安装Go和配置环境
    harbor仓库搭建
    教你怎么半天搞定Docker
    教你分分钟搞定Docker私有仓库Registry
    kubernetes学习:CKA考试题
    Python基础知识
  • 原文地址:https://www.cnblogs.com/ldlx-mars/p/9361006.html
Copyright © 2011-2022 走看看