版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zww1984774346/article/details/78039841
<div class="markdown_views">
<p>方法简介:</p>
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)
);
- 1
- 2
- 3
- 4
- 5
- 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>
);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
效果图: