如果我知道图像文件的存在位置,有一个功能可以将其保存到相机胶卷中,这是有道理的:
https://facebook.github.io/react-native/docs/cameraroll.html
但是如果我想从内容创建新图片怎么办?
https://i.imgur.com/kFsGuh9.png
我要求用户上传照片并添加一些文字,然后我想将其保存到相机胶卷。这看起来很基本,但我很难找到以反应原生方式完成此任务的最佳方法。
基本上,我想用react-native做到这一点 How to capture UIView to UIImage without loss of quality on retina display
答案 0 :(得分:2)
我用这个包找到了我要找的东西。 https://github.com/jsierles/react-native-view-snapshot
以下是我为我的应用编写的代码:
'use strict';
var React = require('react-native');
var How = require('./How');
var styles = require('./Styles');
var UIImagePickerManager = require('NativeModules').UIImagePickerManager;
var reactNativeStore = require('react-native-store');
var ViewSnapshotter = require('react-native-view-snapshot');
var RNFS = require("react-native-fs");
var {
AppRegistry,
NavigatorIOS,
Component,
Text,
TextInput,
View,
TouchableHighlight,
Image,
CameraRoll,
AlertIOS,
} = React;
class DufinitionDetail extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
errorMessage: '',
imageSaved: false,
searchWord: props.dufinition.searchWord,
photo: props.dufinition.photo,
dufinition: props.dufinition,
};
}
render() {
console.log(this.state.dufinition.definition);
return (
<View style={styles.container}>
<View ref="dufinition">
<View style={styles.dufTop}>
<View style={styles.avatarContainer}>
<Image source={{uri: this.state.photo.uri}} style={styles.dufPhoto}/>
</View>
<View style={styles.dufinitionText}>
<Text style={styles.georgia}>{this.state.dufinition.definition.word}</Text>
<Text style={styles.georgia}>{this.state.dufinition.definition.partOfSpeech}</Text>
</View>
</View>
<View style={styles.dufinitionDefinition}>
<Text style={styles.georgia}>{this.state.dufinition.definition.text}</Text>
</View>
</View>
<TouchableHighlight style={styles.button}
underlayColor='#f1c40f'
onPress={this.confirmDelete.bind(this)}>
<Text style={styles.buttonText}>delete this</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button}
underlayColor='#f1c40f'
onPress={this.saveDufinition.bind(this)}>
<Text style={styles.buttonText}>save this</Text>
</TouchableHighlight>
</View>
);
}
saveDufinition(){
console.log('saveDufinition');
var ref = React.findNodeHandle(this.refs.dufinition);
ViewSnapshotter.saveSnapshotToPath(ref, this.imagePath(), (error, successfulWrite) => {
if (successfulWrite) {
this.setState({imageSaved: true});
CameraRoll.saveImageWithTag(this.imagePath(), function(data) {
console.log(data);
}, function(err) {
console.log(err);
});
} else {
console.log(error)
}
}); // ViewSnapshotter
}
imagePath() {
return RNFS.CachesDirectoryPath+"/duf.png";
}
dataInput(event) {
this.setState({ dataInput: event.nativeEvent.text });
}
saveToCameraRoll() {
// console.log('saving to camera roll');
// console.log(this.state.photo.uri);
CameraRoll.saveImageWithTag(this.state.photo.uri, function(data) {
// console.log(data);
}, function(err) {
// console.log(err);
});
}
confirmDelete() {
AlertIOS.alert(
'Delete Dufinition',
'Are you sure?',
[
{text: 'Yes', onPress: () => this.deleteDufinition()},
{text: 'No', onPress: () => console.log('User cancelled deltion')},
]
)
}
async deleteDufinition(dufinition){
var dufineModel = await reactNativeStore.model("dufine_v2");
var remove_data = await dufineModel.remove({
searchWord: this.state.searchWord
});
// console.log(remove_data);
this.props.navigator.pop();
// console.log('return');
}
}
module.exports = DufinitionDetail;
感谢这篇文章指出我正确的方向: https://disqus.com/home/discussion/browniefedblog/react_native_how_to_make_instagram_javascript_without_grammar/#comment-2365685081