图片和视频的上传选择 react-native-image-crop-picker

上传图片和Vedio的第三方库react-native-image-crop-picker
github地址

$ yarn add react-native-image-crop-picker
$ react-native link react-native-image-crop-picker

运行遇到报错:

Execution failed for task ':app:preDebugBuild'.
> Could not resolve all files for configuration ':app:debugCompileClasspath'.
   > Could not find com.github.yalantis:ucrop:2.2.2-native.
     Required by:
         project :app > project :react-native-image-crop-picker


无法读取到外服的数据,只能用VPN或者添加如下服务。

1.android/build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "28.0.3"
        minSdkVersion = 16
        compileSdkVersion = 28
        targetSdkVersion = 28
        supportLibVersion = "28.0.0"
    }
    repositories {
        google()
        jcenter()
        maven { url "http://dl.bintray.com/lukaville/maven"}
        maven { url "$rootDir/../node_modules/react-native/android" }
        maven { url 'https://maven.aliyun.com/repository/google'}
        maven { url "https://jitpack.io" }
    }
    dependencies {
        classpath("com.android.tools.build:gradle:3.4.0")
        
        classpath 'com.google.gms:google-services:4.0.1' 
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
   		 maven { url "https://jitpack.io" }// 关键
        mavenLocal()
        google()
        jcenter()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        // 阿里提供
        maven { url 'https://maven.aliyun.com/repository/google'}
        
    }
}

2.在android/app/build.gradle添加

android {
    ...

    defaultConfig {
        //我是要添加的....
        vectorDrawables.useSupportLibrary = true
        ...
    }
    ...
}

Ios配置:
1.在info.plist内添加以下内容

Privacy - Photo Library Usage Description
Privacy - Camera Usage Description
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,关于React Native中图片多选,可以使用react-native-image-picker这个第三方库来实现。以下是使用步骤: 1. 使用npm或者yarn安装该库:`npm install react-native-image-picker` 或者 `yarn add react-native-image-picker` 2. 在iOS中,需要执行`pod install`命令安装相关依赖库。在iOS工程目录下创建Podfile文件,输入以下内容: ``` platform :ios, '9.0' target 'YourApp' do pod 'React', :path => '../node_modules/react-native', :subspecs => [ 'Core', 'CxxBridge', 'RCTText', 'RCTNetwork', 'RCTWebSocket', 'RCTAnimation' ] pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker' end ``` 3. 在Android中,需要在AndroidManifest.xml文件中添加相关权限: ``` <uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> ``` 4. 在React Native组件中导入该库: ``` import ImagePicker from 'react-native-image-picker'; ``` 5. 使用ImagePicker.launchImageLibrary方法选择图片: ``` ImagePicker.launchImageLibrary(options, (response) => { console.log('Response = ', response); if (response.didCancel) { console.log('User cancelled image picker'); } else if (response.error) { console.log('ImagePicker Error: ', response.error); } else if (response.customButton) { console.log('User tapped custom button: ', response.customButton); } else { const source = { uri: response.uri }; // You can also display the image using data: // const source = { uri: 'data:image/jpeg;base64,' + response.data }; this.setState({ avatarSource: source, }); } }); ``` 其中,options参数可以配置图片选择器的一些选项,如选择多张图片等。详细使用方法可以查看该库的官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值