ReactNative手机端调用相册react-native-image-crop-picker

react-native-image-crop-picker可以实现打开手机相册

查看官网https://github.com/ivpusic/react-native-image-crop-picker

import React from 'react';
import {
    SafeAreaView, TouchableOpacity, StyleSheet, Text, View
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import ImagePicker from 'react-native-image-crop-picker';
export default class NewMsgBac extends React.Component {
    goToPage(pageName, param) {
        if (param) {
            this.props.navigation.navigate(pageName, param);
        }
        this.props.navigation.navigate(pageName);
    }
    openPhoto(){
        ImagePicker.openPicker({
            width: 300,
            height: 400,
            cropping: true
          }).then(image => {
            console.log(image);
          });
    }
    render() {
        return (
            <SafeAreaView style={{flex:1,backgroundColor:'#F2F2F2'}}>
                <TouchableOpacity onPress={() => this.goToPage('ChoiceImgLocal')}>
                    <View style={[Styles.itemView, {marginTop:10}]}>
                        <Text style={Styles.itemText}>选择背景图</Text>
                        <Icon style={{marginLeft: 5}} name="angle-right" size={25} color="#BBB"/>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity  onPress={() => this.openPhoto()}>
                    <View style={[Styles.itemView, {marginTop:10}]}>
                        <Text style={Styles.itemText}>从手机相册选择</Text>
                        <Icon style={{marginLeft: 5}} name="angle-right" size={25} color="#BBB"/>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={() => this.goToPage('ChoiceImgCamera')}>
                    <View style={[Styles.itemView]}>
                        <Text style={Styles.itemText}>拍一张</Text>
                        <Icon style={{marginLeft: 5}} name="angle-right" size={25} color="#BBB"/>
                    </View>
                </TouchableOpacity>
            </SafeAreaView>
        )
    }
}

const Styles = StyleSheet.create({
    itemView: {
        flexDirection: 'row',
        alignItems: 'center',
        height: 50,
        paddingLeft: 15,
        paddingRight: 15,
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: '#ddd',
        backgroundColor: '#FFF',
    },
    itemText: {
        flex:1,
        flexWrap: "wrap-reverse",
        fontSize: 15,
        color:'#333'
    },
});