React Native 生成图片

方法简介：

takeSnapshot方法是react-native自带的生成图片的属性，可以将”screen”, “window” 或者 “view”生成对应的图片。

兼容：
takeSnapshot之前的写法是在UIManager中，新版本后放到了ReactNative模块中。

使用：
直接使用以下方法即可调用生成对应视图的图片

注意：需要引用ReactNative模块
var ReactNative = require('react-native');

ReactNative.takeSnapshot('screen', {format: 'png', quality: 1}).then((uri) => this.setState({uri:uri})
).catch((error) => alert(error)
);

takeSnapshot第一个参数：需要生成图片的视图类型，比如：’screen’,’window’,’this.refs.view’
takeSnapshot第二个参数：生成图片的格式

完整代码：

import React, { Component } from 'react';
var ReactNative = require('react-native');
import { AppRegistry, Text, View, Dimensions, Image } from 'react-native';
var {height, width} = Dimensions.get('window');
export default class pictureDemo extends Component {constructor(props){super(props);this.state = {uri: 'null'}}takeToImage() {ReactNative.takeSnapshot(this.refs.location, {format: 'png', quality: 1}).then((uri) => this.setState({uri:uri})).catch((error) => alert(error));}render(){console.log(this.state.uri);return (<View><View ref='location' style={{backgroundColor: 'green', padding: 12, margin: 20}}><Text>this is a girl</Text><Text>this is a friend</Text><Text>o</Text><Text>this is a girl friend</Text></View><Text onPress={()=>this.takeToImage()}>生成图片</Text><Image style={{borderWidth: 1, height: 100, width: width, marginTop: 10}} source={{uri: this.state.uri}} /></View>);}
}

效果图：

React Native 生成图片相关推荐

fragment中文网_更新 · React Native 中文网
时刻将 React Native 更新到最新的版本,可以获得更多 API.视图.开发者工具以及其他一些好东西(译注:官方开发任务繁重,人手紧缺,几乎不会对旧版本提供维护支持,所以即便更新可能带来一些兼 ...
React Native —— App
使用 React Native 作为 app 框架,Redux 作为数据层,因此我们需要选用一些支持性的技术和工具: 开源的 Parse Server 做数据存储 - 运行在 Node.js 上. F ...
【React Native】iOS原生导航跳转RN页面
上一篇介绍了React Native使用react-navigation进行导航跳转页面,现在我们介绍下原生iOS中怎么导航进一个新的React Native页面. 一.原生跳转React Nativ ...
【React Native】react-navigation导航使用方法
目录集成react-navigation 使用react-navigation 上一篇介绍了如何在已有iOS项目中集成React Native.这一篇我们把上一篇的demo做下拓展,添加点击电影跳转 ...
给iOS开发者的React Native入门使用教程
目录一. 原生iOS项目集成React Native 二. 原生跳转RN页面三. 显示豆瓣热门电影列表四. 改为导航五.完整源代码一. 原生iOS项目集成React Native 创建一个新 ...
对比React Native、dcloud、LuaView三个框架技术（内部）
转载自:http://www.jianshu.com/p/ee1cdb33db8d 主要对比React Native和5+SDK(就是dcloud的SDK)两个: 开发语言:三个都是用其他语言来统一开 ...
初步了解React Native的新组件库firstBorn
first-born is a React Native UI Component Framework, which follows the design methodology Atomic Des ...
我在React Native中构建时获得的经验教训
by Amanda Bullington 通过阿曼达·布林顿(Amanda Bullington) 我在React Native中构建时获得的经验教训 (Lessons I learned while ...
React Native开源项目如何运行（附一波开源项目）
学习任何技术,最快捷的方法就是学习完基础语法,然后模仿开源项目进行学习,React Native也不例外.React Native推出了1年多了, 开源项目太多了,我们以其中一个举例子.给大家演示下如 ...

React Native 生成图片

React Native 生成图片相关推荐

最新文章

热门文章