react-native - 如何创建图像文件和 'Save to Camera Roll'

Question

如果我知道图像文件的存在位置，则有一个功能可以将其保存到相机胶卷中，这是有道理的:

https://facebook.github.io/react-native/docs/cameraroll.html

.

.

但是如果我想从内容创建一个新图像怎么办:

https://i.imgur.com/kFsGuh9.png

我要求用户上传照片并添加一些文字，然后我想将其保存到相机胶卷中。这看起来很基本，但我很难找到在 react-native 中实现这一点的最佳方法。

基本上，我想用 react-native 来做到这一点
How to capture UIView to UIImage without loss of quality on retina display

Answer 1

我用这个包找到了我想要的东西。
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