首先将一个View 生成图片 废话不多说 直接上代码 主要用到 takeSnapshot 这个是react native 自带的 生成图片的组件takeSnapshot之前的写法是在UIManager中，新版本后放到了ReactNative模块中。
takeSnapshot方法是react-native自带的生成图片的属性，可以将”screen”, “window” 或者 “view”生成对应的图片。
只需简单的几步 就能生成 图片
1 var ReactNative= require('react-native');
<View ref='location'>
<TouchableOpacity activeOpacity={1}onPress={()=>{this.takePhoto()}}>
<Text style={styles.instructions}> 生成图片
< TouchableOpacity>
takeSnapshot第一个参数：需要生成图片的视图类型，比如：’screen’,’window’,’this.refs.view’
takeSnapshot第二个参数：生成图片的格式
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);
});
}
保存图片 需要几个 步骤
1 需要在 Library 中 找到RCTCameraRoll
路径
/Users/zhiqiang/Desktop/Rntext + /node_modules/react-native/Libraries/CameraRoll/RCTCameraRoll.xcodeproj
+ 号 前面的是我自己的 路径 +号 后面的是固定路径
找到这个路径 把他拖到 如图所示的位置
2 打开iOS info.plist文件 添加两个 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'>
{/*这个点击方法 无需注意 是我测试跟原生交互玩的*/}
<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>
{/*点击图片保存到本地*/}
<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);