方法简介:
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)
);
完整代码:
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,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>
);
}
}
效果图:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。