react native中使用 react-native-easy-toast 和react-native-htmlview

第一步，下载依赖

npm install react-native-htmlview --savenpm 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}/><HTMLViewvalue={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}/><HTMLViewvalue={htmlContent}stylesheet={styles}/></View>)}
}const styles = StyleSheet.create({a: {fontWeight: '300',color: '#FF3366',},
});

转载于:https://www.cnblogs.com/ldlx-mars/p/9361006.html

react native中使用 react-native-easy-toast 和react-native-htmlview相关推荐

在react项目中编写css,更好的在react项目中写css代码--emotion
简介: emotion是一个JavaScript库,使用emotion可以用写js的方式写css代码.在react中安装emotion后,可以很方便进行css的封装,复用.使用emotion后,浏览器 ...
在React / React Native中使用构造函数与getInitialState有什么区别？
本文翻译自:What is the difference between using constructor vs getInitialState in React / React Native? I ...
react本地储存_如何在React项目中利用本地存储
react本地储存以及为什么要这么做. 本地存储是现代Web浏览器固有的Web API. 它允许网站/应用程序在浏览器中存储数据(简单和有限),从而使数据在以后的浏览器会话中可用. 在开始学习本教程 ...
如何在 React 18中利用Suspense 实现服务端渲染(SSR)
概述 React 18 将包括对其服务器端渲染 (SSR) 性能的架构做了改进.这些改进带来了实质性的效果,是几年来其团队工作的结晶.大多数的改进点都是在幕后进行的,但您需要了解一些选择加入机制,尤 ...
前端React教程第三课数据是如何在 React 组件之间流动
04 数据是如何在 React 组件之间流动的?(上) 通过前面 3 个课时的学习,相信你已经对 React 生命周期相关的"Why""What"和" ...
如何在React Native中使用react-navigation 5处理导航
React-navigation is the navigation library that comes to my mind when we talk about navigation in Re ...
了解React Native中的不同JavaScript环境
by Khoa Pham 通过Khoa Pham 了解React Native中的不同JavaScript环境 (Get to know different JavaScript environmen ...
如何在React Native中构建项目并管理静态资源
by Khoa Pham 通过Khoa Pham 如何在React Native中构建项目并管理静态资源 (How to structure your project and manage stati ...
我在React Native中构建时获得的经验教训
by Amanda Bullington 通过阿曼达·布林顿(Amanda Bullington) 我在React Native中构建时获得的经验教训 (Lessons I learned while ...
如何在React Native中写一个自定义模块
前言在 React Native 项目中可以看到 node_modules 文件夹,这是存放 node 模块的地方,Node.js 的包管理器 npm 是全球最大的开源库生态系统.提到npm,一般指 ...

react native中使用 react-native-easy-toast 和react-native-htmlview

react native中使用 react-native-easy-toast 和react-native-htmlview相关推荐

最新文章

热门文章