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',
    },
});

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM