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

古城微笑少年丶 2022-12-21 10:55 239阅读 0赞

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

查看官网[https://github.com/ivpusic/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'
        },
    });

[https_github.com_ivpusic_react-native-image-crop-picker]: https://github.com/ivpusic/react-native-image-crop-picker