React Native 把组件转化生成图片

                                        <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

效果图：
这里写图片描述

                                        <div class="markdown_views">
            <p>方法简介：</p>