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,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>
      );
    }
}

效果图：