首先將一個(gè)View 生成圖片 ?廢話不多說(shuō) 直接上代碼 主要用到?takeSnapshot ?這個(gè)是react native 自帶的 生成圖片的組件takeSnapshot之前的寫(xiě)法是在UIManager中肾档，新版本后放到了ReactNative模塊中郭赐。
takeSnapshot方法是react-native自帶的生成圖片的屬性，可以將”screen”, “window” 或者 “view”生成對(duì)應(yīng)的圖片访忿。?
只需簡(jiǎn)單的幾步 就能生成 圖片?
1 ?var ReactNative= require('react-native');
<View?ref='location'>
<TouchableOpacity?activeOpacity={1}onPress={()=>{this.takePhoto()}}>
<Text?style={styles.instructions}> 生成圖片??
? ?<?TouchableOpacity>
takeSnapshot第一個(gè)參數(shù)：需要生成圖片的視圖類(lèi)型，比如：’screen’,’window’,’this.refs.view’
takeSnapshot第二個(gè)參數(shù)：生成圖片的格式
takePhoto(){
? ? ReactNative.takeSnapshot(this.refs.location, {format: 'png', quality: 1}).then(
(uri)=> {console.log(uri);this.setState({imageUrl:uri})}
? ? ).catch(
(error)=> alert(error)
? ? );
}
生成圖片 顯示到 ?Image 組件中?
<TouchableOpacity?activeOpacity={1}onPress={()=>{this.saveImg(this.state.imageUrl)}}>
<Image?source={{uri:this.state.imageUrl}}style={{marginTop: 100,height:100,width:200,backgroundColor:'gray'}} />
TouchableOpacity>
保存圖片
saveImg(img) {
var promise= CameraRoll.saveToCameraRoll(img);
promise.then(function(result) {
alert('保存成功灸眼！地址如下：\n' +?result);
}).catch(function(error) {
alert('保存失斢展稹夏漱！\n' +?error);
? ? });
}
保存圖片 需要幾個(gè) 步驟?
1 ? 需要在 Library 中 找到RCTCameraRoll?
路徑
/Users/zhiqiang/Desktop/Rntext? ?+ ?/node_modules/react-native/Libraries/CameraRoll/RCTCameraRoll.xcodeproj?
+ 號(hào) 前面的是我自己的 路徑 ? ?+號(hào) 后面的是固定路徑?
找到這個(gè)路徑 ?把他拖到 如圖所示的位置
2 ?打開(kāi)iOS info.plist文件 添加兩個(gè) key ?后面是描述?
NSCameraUsageDescription ??
NSPhotoLibraryAddUsageDescription ??
3 ?添加.a 文件
具體代碼
import React, { Component }from 'react';
import {
? AppRegistry,
? StyleSheet,
? Text,
? View,
? ? NativeModules,
? ? TouchableOpacity,
? ? Image,
? ? CameraRoll,
}from 'react-native';
var? textCom= NativeModules.textCom;
var ReactNative= require('react-native');
export default class Rntextextends Component {
constructor(props){
super(props);
? ? ? ? this.state={
? ? ? ? ? ? imageUrl:''
}
? ? }
saveImg(img) {
var promise= CameraRoll.saveToCameraRoll(img);
promise.then(function(result) {
alert('保存成功！地址如下：\n' +?result);
}).catch(function(error) {
alert('保存失敗达椰！\n' +?error);
? ? ? ? });
? ? }
? ? takePhoto(){
? ? ? ? ReactNative.takeSnapshot(this.refs.location, {format: 'png', quality: 1}).then(
(uri)=> {console.log(uri);this.setState({imageUrl:uri})}
? ? ? ? ).catch(
(error)=> alert(error)
? ? ? ? );
? ? }
? render() {
? ? return (
<View?style={styles.container}>
<View?ref='location'>
? ? ? ? ? ? ? {/*這個(gè)點(diǎn)擊方法 無(wú)需注意 是我測(cè)試跟原生交互玩的*/}
<TouchableOpacity?activeOpacity={1}onPress={()=>{textCom.shareImage('123',(message?=>{
console.log(message);
? ? ? ? ? ? ? }))}}>
<Text?style={styles.welcome}>
?原生交互
Text>
?TouchableOpacity>
<Text?style={styles.instructions}>
?To get started, edit index.ios.js
Text>
<TouchableOpacity?activeOpacity={1}onPress={()=>{this.takePhoto()}}>
<Text?style={styles.instructions}>
?生成一張圖片
Text>
?TouchableOpacity>
?View>
? ? ? ? ? {/*點(diǎn)擊圖片保存到本地*/}
<TouchableOpacity?activeOpacity={1}onPress={()=>{this.saveImg(this.state.imageUrl)}}>
<Image?source={{uri:this.state.imageUrl}}style={{marginTop: 100,height:100,width:200,backgroundColor:'gray'}} />
?TouchableOpacity>
?View>
? ? );
? }
}
const styles= StyleSheet.create({
? container: {
? ? flex: 1,
? ? justifyContent: 'center',
? ? alignItems: 'center',
? ? backgroundColor: '#F5FCFF',
? },
? welcome: {
? ? fontSize: 20,
? ? textAlign: 'center',
? ? margin: 10,
? },
? instructions: {
? ? textAlign: 'center',
? ? color: '#333333',
? ? marginBottom: 5,
? },
});
AppRegistry.registerComponent('Rntext', ()=> Rntext);
