美文网首页
获取本地图片和调用相机的代码

获取本地图片和调用相机的代码

作者: 想成为大牛的小白 | 来源:发表于2017-09-14 13:57 被阅读0次

    看自己前面标题写的上传头像,实际都没有完成,现在回头看看全都是瞎扯的,只是刚开始用的时候出现的一些问题,现在上一下获取本地相机并且上传图片的代码。

    本文参考:https://github.com/react-community/react-native-image-picker

    还有这个组件需要配置的东西,可以参考:http://www.cnblogs.com/shaoting/p/6148085.html

    图片上传的时候react-native-image-picker这个插件的时候ios上的会出现闪退现象。

    可以给大家一个网址,这个网址上已经很清晰的解决了
    http://www.jianshu.com/p/977bc5eea1b1
    大家可以看这个文章,写的很详细

     import React, { Component } from 'react';
    import {
        AppRegistry,
        StyleSheet,
        View,
        Text,
        Button,
        Dimensions,
        Image,
        TouchableOpacity
    } from 'react-native';
    var {width,height} =Dimensions.get('window');
    import ImagePicker from 'react-native-image-picker';
    var photoOptions={
        title:'请选择',
        cancelButtonTitle:'取消',
        takePhotoButtonTitle:'拍照',
        chooseFromLibraryButtonTitle:'选择相册',
        quality:0.8,
        allowsEditing:true,
        noData:false,
        storageOptions:{
            skipBackup:true,
            path:'images'
        }
    };
    class UploadPhoto extends Component {
        constructor(props){
            super(props);
            this.state={
                avatarSource:null,
            }
        }
        render() {
            return (
                        <View style={styles.praPhoto}>
                            <View style={styles.jia}>
                                <TouchableOpacity onPress={this.openMycamera.bind(this)}>
                                    <Image
                                        source={this.state.avatarSource==null?require('../img/add.png'):this.state.avatarSource}
                                        style={{width:58,height:59,borderRadius:5,}}/>
                                </TouchableOpacity>
                            </View>
                        </View>
            );
        }
        openMycamera=()=>{
            var _this = this;
            ImagePicker.showImagePicker(photoOptions,(response)=>{
                console.log('response'+response);
                if(response.didCancel){
                    return;
                }else if(response.error){
                    console.log('ImagePicker Error:',response.error)
                }else if(response.customButton){
                    console.log('Usr tapped custom button:',response.customButton)
                }else {
                    let source = {uri:response.uri};
                    this.setState({
                        avatarSource: source,
                    });
                    this.props.changeImg(response.uri)
                }
            })
        }
    }
    const styles=StyleSheet.create({
        praPhoto:{
            flexDirection:'row',
            paddingTop:17,
        },
        jia:{
            width:60,
            height:60,
            borderWidth:1,
            borderColor:'#f0f0f0',
            marginRight:10,
            borderRadius:5,
            alignItems:'center',
        },
    });
    module.exports=UploadPhoto;
    
    

    相关文章

      网友评论

          本文标题:获取本地图片和调用相机的代码

          本文链接:https://www.haomeiwen.com/subject/zokdsxtx.html