native相册 react_react native 相册 - CSDN
  • CameraRoll 方法 名称 作用 saveImageWithTag 保存图片到相册 getPhotos 从相册中得到图片 ...var React = require('react-native'); var { CameraRoll, Image, SliderIOS, StyleSheet, SwitchIOS, Tex

    CameraRoll

    方法

    名称 作用
    saveImageWithTag 保存图片到相册
    getPhotos 从相册中得到图片

    实例

    'use strict';
    
    var React = require('react-native');
    var {
      CameraRoll,
      Image,
      SliderIOS,
      StyleSheet,
      SwitchIOS,
      Text,
      View,
      TouchableOpacity
    } = React;
    
    var CameraRollView = require('./CameraRollView.ios');
    var AssetScaledImageExampleView = require('./AssetScaledImageExample');
    
    var CAMERA_ROLL_VIEW = 'camera_roll_view';
    
    var CameraRollExample = React.createClass({
    
      getInitialState() {
        return {
          groupTypes: 'SavedPhotos',
          sliderValue: 1,
          bigImages: true,
        };
      },
    
      render() {
        return (
          <View>
            <SwitchIOS
              onValueChange={this._onSwitchChange}
              value={this.state.bigImages} />
            <Text>{(this.state.bigImages ? 'Big' : 'Small') + ' Images'}</Text>
            <SliderIOS
              value={this.state.sliderValue}
              onValueChange={this._onSliderChange}
            />
            <Text>{'Group Type: ' + this.state.groupTypes}</Text>
            <CameraRollView
              ref={CAMERA_ROLL_VIEW}
              batchSize={20}
              groupTypes={this.state.groupTypes}
              renderImage={this._renderImage}
            />
          </View>
        );
      },
    
      loadAsset(asset){
        this.props.navigator.push({
          title: 'Camera Roll Image',
          component: AssetScaledImageExampleView,
          backButtonTitle: 'Back',
          passProps: { asset: asset },
        });
      },
    
      _renderImage(asset) {
        var imageSize = this.state.bigImages ? 150 : 75;
        var imageStyle = [styles.image, {width: imageSize, height: imageSize}];
        var location = asset.node.location.longitude ?
          JSON.stringify(asset.node.location) : 'Unknown location';
        return (
          <TouchableOpacity onPress={ this.loadAsset.bind( this, asset ) }>
            <View key={asset} style={styles.row}>
              <Image
                source={asset.node.image}
                style={imageStyle}
              />
              <View style={styles.info}>
                <Text style={styles.url}>{asset.node.image.uri}</Text>
                <Text>{location}</Text>
                <Text>{asset.node.group_name}</Text>
                <Text>{new Date(asset.node.timestamp).toString()}</Text>
              </View>
            </View>
          </TouchableOpacity>
        );
      },
    
      _onSliderChange(value) {
        var options = CameraRoll.GroupTypesOptions;
        var index = Math.floor(value * options.length * 0.99);
        var groupTypes = options[index];
        if (groupTypes !== this.state.groupTypes) {
          this.setState({groupTypes: groupTypes});
        }
      },
    
      _onSwitchChange(value) {
        this.refs[CAMERA_ROLL_VIEW].rendererChanged();
        this.setState({ bigImages: value });
      }
    });
    
    var styles = StyleSheet.create({
      row: {
        flexDirection: 'row',
        flex: 1,
      },
      url: {
        fontSize: 9,
        marginBottom: 14,
      },
      image: {
        margin: 4,
      },
      info: {
        flex: 1,
      },
    });
    
    exports.title = 'Camera Roll';
    exports.description = 'Example component that uses CameraRoll to list user\'s photos';
    exports.examples = [
      {
        title: 'Photos',
        render(): ReactElement { return <CameraRollExample />; }
      }
    ];
    

    效果

    这里写图片描述

    展开全文
  • 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

    展开全文
  • 这个项目实现了本地图片、视频的展示,图片、视频的全选、删除功能
  • github地址: https://github.com/react-native-community/react-native-image-picker 效果图: 使用步骤: 1cd 到项目目录下 ...react-native link react-native-image-picker 2在android目录下在Android...

    github地址:
    https://github.com/react-native-community/react-native-image-picker

    效果图:
    在这里插入图片描述

    使用步骤:
    1cd 到项目目录下
    yarn add react-native-image-picker
    react-native link react-native-image-picker

    2在android目录下在AndroidManifest文件中添加权限

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

    3复制文档代码:
    ChoosePicture.js

    import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View, Button, Image, Alert} from 'react-native';
    import ImagePicker from 'react-native-image-picker';
    
    
    /**
     * 从相机,或者相册中选择图片,展示出来
     */
    export default class ChoosePicture extends Component {
        constructor(props) {
            super(props);
            // 保存选择图片的信息
            this.state = {
                avatarSource: {},
            }
        }
    
        // 选择图片或相册
        onClickChoosePicture = () => {
            const options = {
                title: '',
                cancelButtonTitle: '取消',
                takePhotoButtonTitle: '拍照',
                chooseFromLibraryButtonTitle: '选择照片',
                storageOptions: {
                    skipBackup: true,
                    path: 'images',
                }
            };
    
            ImagePicker.showImagePicker(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};
                    this.setState({
                        avatarSource: source,
                    });
                    console.warn(this.state.avatarSource.uri);
                }
            });
        }
    
    
        render() {
            return (
                <View style={styles.container}>
                    {/*选择图片的按钮*/}
                    <Text style={styles.textStyle}  onPress={() => this.onClickChoosePicture()}>选择图片</Text>
                    {/*展示图片*/}
                    <Image source={this.state.avatarSource} style={styles.uploadAvatar}/>
                </View>
            );
        }
    }
    
    const styles = StyleSheet.create({
    
        container: {
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
            marginTop: 30,
        },
        textStyle:{
            backgroundColor:'#66CCFF',
            paddingHorizontal:50,
            paddingVertical:10,
        },
        uploadAvatar:{
            width: 150,
            height: 150,
        }
    
    
    
    });
    

    源码下载:
    walldemo2----ChoosePicture
    https://download.csdn.net/download/zhaihaohao1/11022244

    展开全文
  • 完全征服React Native

    2018-10-22 21:38:05
    React Native是Facebook于2015年推出的跨平台开发...本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合
  • 先是安装 和链接 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

    展开全文
  • 我使用的技术栈是:react-native(0.57.8...我在做的ReactNative项目需要实现扫码功能以及从相册读取本地二维码的功能 我实现这两个功能使用的插件有 react-native-camera react-native-image-picker react-native-...

    我使用的技术栈是:react-native(0.57.8)+ react-navigation + react-redux + ant-design + axios


    我在做的ReactNative项目需要实现扫码功能以及从相册读取本地二维码的功能

    我实现这两个功能使用的插件有

    扫码功能

    扫描页面黑屏

    首先是使用react-native-camera完成扫码功能,根据git文档进行安装和配置,摄像头处理权限等配置不再赘述,遇到问题可以在Issue中看看是否有解决。下面称我实现的扫描页面为Scan页。
    ](https://img-blog.csdnimg.cn/20190302122736533.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzMxMjMxOTU1,size_16,color_FFFFFF,t_70)
    我遇到的第一个问题是重复进入Scan页,相机加载有问题,会出现黑屏现象。解决办法是,根据navigation判断,当进入页面时,再显示RNCamera.

    componentDidMount() {
        const { navigation } = this.props;
        navigation.addListener("willFocus", () =>
          this.setState({ focusedScreen: true })
        );
        navigation.addListener("willBlur", () =>
          this.setState({ focusedScreen: false, showModal: false })
        );
      }
    
    // render函数中:
    this.state.focusedScreen && RNCameraComponent
    

    相机布局

    第二个问题是相机布局,设计给的图是像微信的二维码扫描一样,中间有一块透明区域做扫码。RNCamera无法设置宽高,视图是全屏,需要自己布局。我将页面分为了上中下三块,中间又分为左中右三块,大概是这样:
    在这里插入图片描述
    中间②区域背景用UI给的透明图片,加上扫描动画,就像模像样啦~
    扫描动画用的是RN原生的Animated

    // 初始化
     this.state = {
          moveAnim: new Animated.Value(0), // 扫描动画
    };
    
    // 设置扫描高度,速度等
    startAnimation = () => {
        this.state.moveAnim.setValue(258);
        Animated.timing(this.state.moveAnim, {
          toValue: 0,
          duration: 1500,
          easing: Easing.linear
        }).start(() => this.startAnimation());
      };
      
    // render函数中
      <Animated.View
          style={[styles.border,
          { transform: [{ translateY:this.state.moveAnim }] }
          ]}
        />
    

    完成了相机布局,将onBarCodeRead函数写好自己的回调,扫描二维码部分就告一段落了。

    相册读取二维码

    这一部分我用了react-native-image-pickerreact-native-local-barcode-recognizer,首先用react-native-image-picker读取相册并选取想要扫描的图片,再将图片信息使用react-native-local-barcode-recognizer解析,其实解析部分也可以自己使用Zxing库,react-native-local-barcode-recognizer本身也是对Zxing的封装。

    引入两个库的过程git上有,很方便的一点是image-picker读取图片数据可以直接获取Base64数据,格式刚好是local-barcode-recognizer解析需要的。

    部分二维码无法识别

    local-barcode-recognizer库解析时,有些二维码无法识别,我刚开始一直以为是二维码数据过长,不好解析,后来发现是现在的手机拍照像素高照片过大。于是在local-barcode-recognizer库的源码解析代码中加入一个缩小图片数据的函数。果然,缩小图片后可以解析之前拍下的二维码啦~

    public static Bitmap getSmallerBitmap(Bitmap bitmap) {
            int size = bitmap.getWidth() * bitmap.getHeight() / 160000;
            if (size <= 1)
                return bitmap; // 如果小于
            else {
                Matrix matrix = new Matrix();
                matrix.postScale((float) (1 / Math.sqrt(size)), (float) (1 / Math.sqrt(size)));
                Bitmap resizeBitmap = Bitmap.createBitmap(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), matrix,
                        true);
                return resizeBitmap;
            }
        }
    

    二维码识别率低

    二维码识别率低的问题困扰了我很久,毕竟用react-native-camera扫描的时候,很快就识别了相应二维码。
    我找了很久原因,发现react-native-camera解析时用的格式是YUV,而react-native-local-barcode-recognizer中用的是ARGB
    网上也有博客说YUV格式解析识别率会更高,于是我更改了react-native-local-barcode-recognizer源码中decode的函数,确实提高了一定的识别率。(但是还是达不到react-native-camera的程度,好想直接知道微信的识别算法哦)

    private BinaryBitmap generateBitmapFromImageData(Bitmap bitmap) {
            bitmap = getSmallerBitmap(bitmap);
            int[] mImageData = new int[bitmap.getWidth() * bitmap.getHeight()];
            bitmap.getPixels(mImageData, 0, bitmap.getWidth(), 0, 0, bitmap.getWidth(), bitmap.getHeight());
            int inputWidth = bitmap.getWidth();
            int inputHeight = bitmap.getHeight();
            byte[] yuv = new byte[inputWidth * inputHeight + ((inputWidth % 2 == 0 ? inputWidth : (inputWidth + 1))
                    * (inputHeight % 2 == 0 ? inputHeight : (inputHeight + 1))) / 2];
            encodeYUV420SP(yuv, mImageData, inputWidth, inputHeight);
            bitmap.recycle();
            PlanarYUVLuminanceSource source = new PlanarYUVLuminanceSource(yuv, // byte[] yuvData
                    inputWidth, // int dataWidth
                    inputHeight, // int dataHeight
                    0, // int left
                    0, // int top
                    inputWidth, // int width
                    inputHeight, // int height
                    false // boolean reverseHorizontal
            );
            return new BinaryBitmap(new);
        }
    
        private static void encodeYUV420SP(byte[] yuv420sp, int[] argb, int width, int height) {
            // 帧图片的像素大小
            final int frameSize = width * height;
            // Y的index从0开始
            int yIndex = 0;
            // UV的index从frameSize开始
            int uvIndex = frameSize;
            // YUV数据, ARGB数据
            int Y, U, V, a, R, G, B;
            ;
            int argbIndex = 0;
            // ---循环所有像素点,RGB转YUV---
            for (int j = 0; j < height; j++) {
                for (int i = 0; i < width; i++) {
    
                    // a is not used obviously
                    a = (argb[argbIndex] & 0xff000000) >> 24;
                    R = (argb[argbIndex] & 0xff0000) >> 16;
                    G = (argb[argbIndex] & 0xff00) >> 8;
                    B = (argb[argbIndex] & 0xff);
                    argbIndex++;
    
                    // well known RGB to YUV algorithm
                    Y = ((66 * R + 129 * G + 25 * B + 128) >> 8) + 16;
                    U = ((-38 * R - 74 * G + 112 * B + 128) >> 8) + 128;
                    V = ((112 * R - 94 * G - 18 * B + 128) >> 8) + 128;
    
                    Y = Math.max(0, Math.min(Y, 255));
                    U = Math.max(0, Math.min(U, 255));
                    V = Math.max(0, Math.min(V, 255));
                    yuv420sp[yIndex++] = (byte) Y;
                    // ---UV---
                    if ((j % 2 == 0) && (i % 2 == 0)) {
                        yuv420sp[uvIndex++] = (byte) V;
                        yuv420sp[uvIndex++] = (byte) U;
                    }
                }
            }
        }
    

    小提示

    如果你像我一样直接修改 node_modules 内依赖源码,记得重新发包哦。因为线上自动化构建时,拉取的是未经修改的依赖。

    我的解决办法是:fork 依赖的 git 源码,修改后发布新的npm包,再link 到业务项目中。

    以上就是我使用React-Native 实现扫描二维码及读取相册二维码的小结,感谢阅读。

    展开全文
  • RN 项目 安装 react-native-swiper 轮播图库 # 1.5.14 版本 yarn add react-native-swiper // package.json { "name": "RNApp", "version": "0.0.1", "private": true, "scripts": { "start": "react-native ...
  • react-native-image-picker调用相机相册,并且上传图片到服务器
  • react-native-image-picker作为一个集成相机和相册的功能的第三方库,因为其使用相对简单受到前端开发人员的喜爱。react-native-image-picker使用1, 首先,安装下该插件。npm install react-native-image-picker@...
  • 目录: 思路 安装中间件 获取用户相册/相机权限,以及主要步骤 调用接口,实现上传图片文件 思路 获取用户相册/相机权限;...实现本地相册选择/相机拍摄;...封装上传接口,将照片上传到..."react-native-image-picker
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • React Native 四:图片

    2016-04-11 23:15:11
    一、展示图片资源 1.在ReactNative中,图片使用Image组件进行展示,下面我们就以静态、混合和网络资源等多种方式演示图片展示; 2.将图片放在代码文件夹img处;
  • 选择合适的轮子,感谢阿里霸霸 1.需求类似如下 如果安卓做的话应该很简单,我不会
  • http://www.hangge.com/blog/cache/detail_1616.htmlReact Native - 使用CameraRoll获取相册图片、并显示发布:2018/3/8React Native 的 CameraRoll API 提供了访问本地相册的功能,本文演示如何使用 CameraRoll...
  • null is not an object (evaluating '_reactNativeImageCropPicker.default.openPicker') 如何引用第三方的图片剪辑库?上面的错误一直提醒着、出现!查找了好多博客,进入作者的issue,都没有找到解决答案。...
  • 最近要做下载海报和分享的功能,于是有了这篇博客~~ 首先来看一下要实现的效果~ 首先捋一下实现步骤: ... 下面来做具体实现: 具体安装步骤就不再赘述了, ...引入截屏组件react-native-view-shot ...
  • http://www.hangge.com/blog/cache/detail_1617.htmlReact Native - 使用图片选择器react-native-image-picker拍照、选照片 发布:2018/3/7有时我们程序...这个功能使用 react-native-image-picker 库就可以很方...
  • 使用reactNative扩展包react-native-image-crop-picker,调用本机拍照和相册,总结如下 一、下载 npm i react-native-image-crop-picker --save react-native link react-native-image-crop-picker 二、...
  • 1、react-native(0.59.8) 2、Android:buildToolsVersion = "28.0.3",minSdkVersion = 16,compileSdkVersion = 28,targetSdkVersion = 28,supportLibVersion = "28.0.0" 二、具体实现 react使用 react-...
1 2 3 4 5 ... 20
收藏数 1,067
精华内容 426
关键字:

native相册 react