精华内容
下载资源
问答
  • 先是安装 和链接 npm i react-native-...react-native link react-native-image-crop-picker android 配置 1.Gradle版本必须大于2.2,查看工程的android/build.gradle中默认gradle版本: dependencies...

    先是安装 和链接

    npm i react-native-image-crop-picker --save  
    react-native link react-native-image-crop-picker  

    android 配置

    1.Gradle版本必须大于2.2,查看工程的android/build.gradle中默认gradle版本:

        dependencies {
            classpath 'com.android.tools.build:gradle:2.2.3'  
    
            // NOTE: Do not place your application dependencies here; they belong
            // in the individual module build.gradle files
        }

    2. 将以下内容添加到您android/build.gradle的存储库部分

    allprojects {
        repositories {
            mavenLocal()
            jcenter()
            maven {
                // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
                url "$rootDir/../node_modules/react-native/android"
            }
           // jitpack repo是获取ucrop依赖性所必需的
            maven { url "https://jitpack.io" }
        }
    }

    这一步 我在别人文章里面没看到,配置出来 无法启动,后面看了官方文档,才知道还有这一步,如图

    我加的就是 这段  

     

    3.打开android/app/build.gradle    添加

    android {  
        ...  
      
        defaultConfig {  
            ...  
            vectorDrawables.useSupportLibrary = true  
            ...  
        }  
        ...  
    }  

     

    4.打开 android/app/src/main/AndroidManifest.xml配置文件,添加相机权限:

     <uses-permission android:name="android.permission.CAMERA"/> 

     

    ios 配置

    1.在Xcode中打开Info.plist,并添加带有值的字符串键 NSPhotoLibraryUsageDescription,描述为什么需要访问用户照片 以及NSCameraUsageDescription和NSMicrophoneUsageDescription。

     添加下面3个

    NSPhotoLibraryUsageDescription
    NSCameraUsageDescription
    NSMicrophoneUsageDescription

    2.添加依赖

    Cocapods的用户 :

           (1) 在Deployment Info标签下,设置Deployment Target平台版本为:8.0'
              (2) 将pod'RSKImageCropper'和pod'QBImagePickerController'添加到Podfile

    非Cocapods用户:

        (1).将 node_modules/react-native-image-crop-picker/ios/ImageCropPickerSDK 文件夹拖放的xcode项目根目录下

        (2).单info选项卡 在Deployment Info标签下,设置Deployment Target平台版本为:8.0

        (3).选择Embedded Binaries单击  +  并添加  RSKImageCropper.framework  和  QBImagePicker.framework

      

     

     

     使用

    import ImagePicker from 'react-native-image-crop-picker';  
    
    //从本地相册选择单幅图像
    
    ImagePicker.openPicker({  
      width: 300,  
      height: 400,  
      cropping: true  
    }).then(image => {  
      console.log(' 图片路径:'+ image);  
    });  
    
    
    //调用多个图像
    
    ImagePicker.openPicker({  
      multiple: true  
    }).then(images => {  
      console.log(images);  
    }); 
    
    
    
    
    //启动相机拍照
    
    ImagePicker.openCamera({  
      width: 300,  
      height: 400,  
      cropping: true  
    }).then(image => {  
      console.log(image);  
    });
    
    
    
    //裁剪已有的图片
    
    ImagePicker.openCropper({  
      path: 'my-file-path.jpg',  
      width: 300,  
      height: 400  
    }).then(image => {  
      console.log(image);  
    }); 

    最后补充下遇到问题:

    拍照或者选取照片完成后:

    安卓上 不要用alert 去查看 是否取到 图片路径,因为 它不会执行alert ,不知道为什么但是事实是这样,我也是遇到了,然后试了别的方法,才知道这个问题的存在,

    可以先把它转成字符串,存到 state 里在页面上显示出来,就可以看到了,

    还有android  上不能多选,暂时没找解决办法,如果有解决了的,还请告诉我一下,多谢

     

    https://www.npmjs.com/package/react-native-image-crop-picker

         

    转载于:https://www.cnblogs.com/bruce-gou/p/8623415.html

    展开全文
  • 使用reactNative扩展包react-native-image-crop-picker,调用本机拍照和相册,总结如下 一、下载 npm i react-native-image-crop-picker --save react-native link react-native-image-crop-picker 二、...

    使用reactNative扩展包react-native-image-crop-picker,调用本机拍照和相册,总结如下

    一、下载

    npm i react-native-image-crop-picker --save  
    react-native link react-native-image-crop-picker 

    二、配置多个 maven 源:/android/build.gradle,

    三、配置MainApplication.java。目录android/src/java/com/下添加这两句

    import com.beefe.picker.PickerViewPackage;

    四、打开app下的build.gradle,在android / defaultConfig / 节点下添加useSupportLibrary:

    五、打开AndroidManifest.xml配置文件,添加相机权限:

    <uses-permission android:name="android.permission.CAMERA"/>  

    原文地址:https://blog.csdn.net/sinat_17775997/article/details/74908864

    转载于:https://www.cnblogs.com/blog-zy/p/9679371.html

    展开全文
  • react-native-image-picker作为一个集成相机和相册的功能的第三方库,因为其使用相对简单受到前端开发人员的喜爱。react-native-image-picker使用1, 首先,安装下该插件。npm install react-native-image-picker@...

    react-native-image-picker作为一个集成相机和相册的功能的第三方库,因为其使用相对简单受到前端开发人员的喜爱。

    react-native-image-picker使用

    1, 首先,安装下该插件。

    npm install react-native-image-picker@latest --save

    2, 针对Android和iOS平台分别进行配置

    ## android 平台配置

    1,在android/settings.gradle文件中添加如下代码:

    include ':react-native-image-picker'

    project(':react-native-image-picker').projectDir = new File(settingsDir, '../node_modules/react-native-image-picker/android')

    2,在android/app/build.gradle文件的dependencies中添加如下代码:

    compile project(':react-native-image-picker')

    3,在AndroidManifest.xml文件中添加权限:

    4,最后在MainApplication.Java文件中添加如下代码:

    import com.imagepicker.ImagePickerPackage;

    new ImagePickerPackage()

    这样Android环境就配置好了。

    iOS平台配置

    1,打开Xcode打开项目,点击根目录,右键选择 Add Files to ‘XXX’,选中项目中的该路径下的文件即可:node_modules -> react-native-image-picker -> ios -> select RNImagePicker.xcodeproj

    2,添加成功后使用link命令:react-native link react-native-image-picker 。

    3,打开项目依次使用Build Phases -> Link Binary With Libraries将RNImagePicker.a添加到项目依赖。

    4,对于iOS 10+设备,需要在info.plist中配置NSPhotoLibraryUsageDescription和NSCameraUsageDescription。

    react-native-image-picker示例

    为了项目使用的方便,我们将其封装为一个组件CameraButton.js。代码如下:

    import React from 'react'

    import {

    TouchableOpacity,

    StyleSheet,

    Platform,

    ActivityIndicator,

    View,

    Text,

    ToastAndroid

    } from 'react-native'

    var ImagePicker = require('react-native-image-picker');

    import Icon from 'react-native-vector-icons/Ionicons';

    const options = {

    title: '选择图片',

    cancelButtonTitle: '取消',

    takePhotoButtonTitle: '拍照',

    chooseFromLibraryButtonTitle: '图片库',

    cameraType: 'back',

    mediaType: 'photo',

    videoQuality: 'high',

    durationLimit: 10,

    maxWidth: 600,

    maxHeight: 600,

    aspectX: 2,

    aspectY: 1,

    quality: 0.8,

    angle: 0,

    allowsEditing: false,

    noData: false,

    storageOptions: {

    skipBackup: true,

    path: 'images'

    }

    };

    class CameraButton extends React.Component {

    constructor(props){

    super(props);

    this.state = {

    loading:false

    }

    }

    render() {

    const {photos,type} = this.props;

    let conText;

    if(photos.length > 0){

    conText = (

    {photos.length}

    );

    }

    return (

    onPress={this.showImagePicker.bind(this)}

    style={[this.props.style,styles.cameraBtn]}>

    {conText}

    )

    }

    showImagePicker() {

    ImagePicker.showImagePicker(options, (response) => {

    if (response.didCancel) {

    console.log('User cancelled image picker');

    }

    else if (response.error) {

    console.log('ImagePicker Error: ', response.error);

    }

    else {

    let source;

    if (Platform.OS === 'android') {

    source = {uri: response.uri, isStatic: true}

    } else {

    source = {uri: response.uri.replace('file://', ''), isStatic: true}

    }

    let file;

    if(Platform.OS === 'android'){

    file = response.uri

    }else {

    file = response.uri.replace('file://', '')

    }

    this.setState({

    loading:true

    });

    this.props.onFileUpload(file,response.fileName||'未命名文件.jpg')

    .then(result=>{

    this.setState({

    loading:false

    })

    })

    }

    });

    }

    }

    const styles = StyleSheet.create({

    cameraBtn: {

    padding:5

    },

    count:{

    color:'#fff',

    fontSize:12

    },

    fullBtn:{

    justifyContent:'center',

    alignItems:'center',

    backgroundColor:'#fff'

    },

    countBox:{

    position:'absolute',

    right:-5,

    top:-5,

    alignItems:'center',

    backgroundColor:'#34A853',

    width:16,

    height:16,

    borderRadius:8,

    justifyContent:'center'

    }

    });

    export default CameraButton;

    然后在需要使用的地方引入。

    import CameraButton from '../../component/huar/cameraButton'

    photos={[]}

    onFileUpload={this.onFileUpload} />

    点击上传事件:

    onFileUpload(file, fileName){

    return this.props.uploadAvatar({

    id: this.props.user.ID,

    type:'logo',

    obj:'user',

    corpId: this.props.cropId

    }, file, fileName)}

    Action请求代码:

    function actions(dispatch) {

    return {

    fileUrl,fileName)=>dispatch(Actions.uploadAvatar(params, fileUrl,fileName))

    }

    }

    actions中的uploadAvatar函数如下。

    function uploadAvatar(params, fileUrl, fileName) {

    return dispatch=> {

    return UserService.uploadImage(params, fileUrl, fileName)

    .then(result=> {

    dispatch({

    type: UPDATE_AVATAR,

    path: result.path

    })

    return result

    })

    }

    }

    //UserService.uploadImage代码如下

    export function uploadImage(params, fileUrl,fileName) {

    return http.uploadFile(`${config.UploadImage}`, params, fileUrl,fileName)

    }

    UserService函数的http异步上传图片代码如下:

    let queryString = require('query-string');

    import Storage from './storage'

    import {

    Platform

    } from 'react-native'

    const os = Platform.OS;

    async function uploadFile(url, params, fileUrl,fileName) {

    let Access_Token = await Storage.getItem('Access_Token');

    let data = new FormData();

    data.append('file', {

    uri: fileUrl,

    name: fileName,

    type: 'image/jpeg'

    });

    Object.keys(params).forEach((key)=> {

    if (params[key] instanceof Date) {

    data.append(key, value.toISOString())

    } else {

    data.append(key, String(params[key]))

    }

    });

    const fetchOptions = {

    method: 'POST',

    headers: {

    'Accept': 'application/json',

    'Access_Token': Access_Token ? Access_Token : '',

    'UserAgent':os

    },

    body: data

    };

    return fetch(url, fetchOptions)

    .then(checkStatus)

    .then(parseJSON)

    }

    封装上传

    如果上面的实现看的比较复杂,那么我们做如下的封装:

    let common_url = 'http://192.168.1.1:8080/'; //服务器地址

    let token = ''; //用户登陆后返回的token

    function uploadImage(url,params){

    return new Promise(function (resolve, reject) {

    let formData = new FormData();

    for (var key in params){

    formData.append(key, params[key]);

    }

    let file = {uri: params.path, type: 'application/octet-stream', name: 'image.jpg'};

    formData.append("file", file);

    fetch(common_url + url, {

    method: 'POST',

    headers: {

    'Content-Type': 'multipart/form-data;charset=utf-8',

    "x-access-token": token,

    },

    body: formData,

    }).then((response) => response.json())

    .then((responseData)=> {

    console.log('uploadImage', responseData);

    resolve(responseData);

    })

    .catch((err)=> {

    console.log('err', err);

    reject(err);

    });

    });

    }

    然后在使用的地方:

    let params = {

    userId:'abc12345', //用户id

    path:'file:///storage/emulated/0/Pictures/image.jpg' //本地文件地址

    }

    uploadImage('app/uploadFile',params )

    .then( res=>{

    //请求成功

    if(res.header.statusCode == 'success'){

    //这里设定服务器返回的header中statusCode为success时数据返回成功

    upLoadImgUrl = res.body.imgurl; //服务器返回的地址

    }else{

    //服务器返回异常,设定服务器返回的异常信息保存在 header.msgArray[0].desc

    console.log(res.header.msgArray[0].desc);

    }

    }).catch( err=>{

    //请求失败

    })

    展开全文
  • react native 相册功能

    2017-07-07 11:08:39
    这个项目实现了本地图片、视频的展示,图片、视频的全选、删除功能 效果图: 项目中有几个功能需要自己去完成: 1、真正的删除手机上的文件,未实现 ...3、分享模式下点击应该跳转到分享界面,未...

    这个项目实现了本地图片、视频的展示,图片、视频的全选、删除功能
    效果图:
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述

    项目中有几个功能需要自己去完成:
    1、真正的删除手机上的文件,未实现
    2、正常模式下点击应该跳转到预览界面,未实现
    3、分享模式下点击应该跳转到分享界面,未实现

    由于包比较大,我没有把android、ios、node_modules文件夹打包,你可以把相应的源文件拷贝到你的项目中,项目中用到了mobx,请自行安装。

    下载地址:http://download.csdn.net/detail/mengks1987/9891421

    展开全文
  • react-native-image-picker作为一个集成相机和相册的功能的第三方库,因为其使用相对简单受到前端开发人员的喜爱。react-native-image-picker使用1, 首先,安装下该插件。npm install react-native-image-picker@...
  • https://www.jianshu.com/p/0fe130d851f4
  • 最近需要在react native项目中集成相机和相册的功能,于是在网上找了一个好用的第三方插件:react-native-image-picke .http://www.cnblogs.com/shaoting/p/6148085.html 该插件可以同时给iOS和Android两个平台下...
  • 最近需要在react native项目中集成相机和相册的功能,于是在网上找了一个好用的第三方插件:react-native-image-picke. http://www.cnblogs.com/shaoting/p/6148085.html 该插件可以同时给iOS和Android两个平台下...
  • 每一次只允许选择一张图片,每次从相册中选择一图片点击右上角确定后,立即发送请求,上传该图片,并且下次再点击时,重复这个动作。 (1)点击下图的上传资料 (2)点击红框内的按钮 (3)选择图片 (4)...
  • react-native-image-picker调用相机相册,并且上传图片到服务器
  • React Native图片选择裁剪组件:react-native-image-crop-picker,支持安卓和IOS双平台,支持从相册、相机选择图片和视频,可以单选和多选,可以压缩和裁剪。效果图安装方法npm i react-native-image-crop-picker --...
  • React Native - 网络请求库SuperAgent使用详解2(响应结果处理) React Native - 网络请求库SuperAgent使用详解1(数据请求) React Native - 网络请求详解(使用XMLHttpRequest、Fetch...
  • 这个项目实现了本地图片、视频的展示,图片、视频的全选、删除功能
  • github地址: https://github.com/react-native-community/react-native-image-picker 效果图: 使用步骤: 1cd 到项目目录下 ...react-native link react-native-image-picker 2在android目录下在Android...
  • 最近做项目用到了react-native-image-picker这个图片选择的第三方库,但在正确配置的情况下,点击选择相册会遇到闪退的问题,凭借开发原生的经验,找到了问题所在,在这里分享一下解决办法。如果遇到什么问题可以在...
  • React Native 使用开源库 react-native-image-crop-picker 实现图片选择、图片剪裁该库可以实现启动本地相册和照相机来采集图片,并且提供多选、图片裁剪等功能,支持iOS和Android两个平台,不同平台需要分别配置,...
  • react-native-image-picker、react-native-heic-converter,然后link一下:react-native link IOS的info.plist中配置如下: 完整代码(注释进行解释): import * as React from 'react'; import { View, Text, ....
  • 我使用的技术栈是:react-native(0.57.8...我在做的ReactNative项目需要实现扫码功能以及从相册读取本地二维码的功能 我实现这两个功能使用的插件有 react-native-camera react-native-image-picker react-native-...
  • import {RNCamera} from 'react-native-camera'; import ImagePicker from 'react-native-image-picker'; import {QRreader} from 'react-native-qr-scanner'; 安装方法 yarn add react-native-camera ya
  • react-native-image-picker支持直接调用摄像头拍摄/从设备相册中选择图片, 原生界面1 安装配置npm install react-native-image-picker@latest --savereact-native linkiOS 端1 打开XCode项目, 添加 node_modules =...
  • react-native-image-crop-picker库选取相册二维码图片 用react-native-local-barcode-recognizer解析二维码图片 如果只需要扫描二维码,不需要识别相册中的二维码图片,只安装react-native-camera库就好 ...
  • 目录: 思路 安装中间件 获取用户相册/相机权限,以及主要步骤 调用接口,实现上传图片文件 思路 获取用户相册/相机权限;...实现本地相册选择/相机拍摄;...封装上传接口,将照片上传到..."react-native-image-picker
  • 我在react-native项目中,运用的第三方插件进行的选择相册图片,在点击的时候,app就自动关闭了 react-native-image-crop-picker 对图片的处理 ImagePicker.openPicker({ width: 300, height: 300, cropping: ...
  • React Native的开发下,同样需要这样的功能来完善App需求。众多优秀的开源库让我们在自己的项目中使用起来非常方便。例如:react-native-image-picker。该库可以实现启动本地相册和照相机来采集图片,但是作者...
  • 最近项目有个需求:保存网络图片到相册,IOS用CameraRoll很容易就实现了,Android稍微要麻烦点,思路是用库react-native-fetch-blob(版本0.10.8,也可以用其它库)下载图片到本地并拿到它的路径,然后用CameraRoll...
  • react-native试玩(31)-访问相册API

    千次阅读 2015-09-08 15:44:29
    CameraRoll 方法 名称 作用 saveImageWithTag 保存图片到相册 getPhotos 从相册中得到图片 ...var React = require('react-native'); var { CameraRoll, Image, SliderIOS, StyleSheet, SwitchIOS, Tex
  • 请万分注意,如果你使用的是writeFile(react-native-fs的一个api)当你的react-native-fs的版本是2.9.11 而非2.11.x以后的版本,会出现request 4 arguments but find 5 arguments的bug,这个是该版本的问题,请确认...
  • React Native 打开手机的相册和相机 安装模块 yarn add react-native-image-picker react-native link react-native-image-picker 复制代码 使用例子 import ImagePicker from 'react-native-image-...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 169
精华内容 67
关键字:

native相册react