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',
},
});
react native中使用 react-native-easy-toast 和react-native-htmlview的更多相关文章
- React Native 中 CSS 的使用
首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...
- react native中的欢迎页(解决首加载白屏)
参照网页: http://blog.csdn.net/fengyuzhengfan/article/details/52712829 首先是在原生中写一些方法,然后通过react native中js去 ...
- React Native中的网络请求fetch和简单封装
React Native中的网络请求fetch使用方法最为简单,但却可以实现大多数的网络请求,需要了解更多的可以访问: https://segmentfault.com/a/1190000003810 ...
- [转] 「指尖上的魔法」 - 谈谈 React Native 中的手势
http://gold.xitu.io/entry/55fa202960b28497519db23f React-Native是一款由Facebook开发并开源的框架,主要卖点是使用JavaScrip ...
- [转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
- 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中一次错误排查 Error:Error: Duplicate resources
最近一直在使用react native中,遇到了很多的坑,同时也学习到了一些移动端的开发经验. 今天在做一个打包的测试时,遇到了一个问题,打包过程中报错“Error:Error: Duplicate ...
- 在React Native中,使用fetch网络请求 实现get 和 post
//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...
- 《React Native 精解与实战》书籍连载「React Native 中的生命周期」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- react native中如何往服务器上传网络图片
let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...
随机推荐
- Node的REPL环境
1. Node的REPL环境 什么是REPL REPL全称 Read-eval-print-loop,交互式解析器 REPL可以提供给程序员对Node.js的一些api快速测试 REPL的基本操作 定 ...
- DbGridEh中改变行的颜色
DbGridEh中改变行的颜色 代码也挺简单的,只是当时没有想到: if ds2.FieldByName('AutoRead').AsInteger=0 thenbegin DBGridEh1.Ca ...
- 转:JDBC中关于PreparedStatement.setObject的一些细节说明
原文地址:https://blog.csdn.net/zhiyangxuzs/article/details/78657235 JDBC中PreparedStatement.setObject(ind ...
- Java之旅_高级教_集合框架
摘自:http://www.runoob.com/java/java-collections.html Java 集合框架 早在Java2之前,java 就提供了特设类.比如:Dictionary,V ...
- vue关于html页面id设置问题
vue是一个前端框架,类似于angularJS等,vue在编写的时候需要在html页面指定id,但是不是都可以实现的,一般放在id需在div设置里才可以实现. (一) 在html里设置id: < ...
- unity 2d游戏 按y坐标排序子对象
List<Transform> objs = new List<Transform>(); for (int i = 0; i < transform.childCoun ...
- mysql数据库的备份和还原
mysql数据库的备份命令:mysqldump -u root -p 要备份的现有数据库名 > 备份后的sql文件名.sql,例如: mysqldump -u root -p heal ...
- 洛谷P3722 影魔 [AH2017/HNOI2017] 线段树+扫描线
正解:线段树+扫描线 解题报告: 传送门! 先理解一下这道题,大概是这样儿的: 对于一个点对,如果他们的两端是这段区间的最大值和次大值,那么他们会有p1的贡献 如果他们的两端是最大值和一个非次大值,那 ...
- There are 0 datanode(s) running and no node(s) are excluded in this operation.
向hadoop导入文件,报错 .... There are 0 datanode(s) running and no node(s) are excluded in this operation. . ...
- NOIP初赛知识点
http://www.doc88.com/p-9982181637642.html 连载中…… (一)八大排序算法 下面这张表摘自博客http://blog.csdn.net/whuslei/arti ...