2017-05-01 11:16:17 qq_31136727 阅读数 3133
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

在使用react-native 制作毕设的过程中,需要用到手机相册,发现react-native- images -crop-picker 组件不错。

1、安装

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

2、 使用

引入 :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.openPicker({
  multiple: true
}).then(images => {
  console.log(images);
});
返回的资源对象(images):
path(string):图片地址
data(base64):图片base64格式数据流
mime(string):图片格式
width(number):图片宽度
height(number):图片高度
size(number):图片大小

3、使用前需要注意的
在xcode中将项目打开,找到Embedded Binaries, 点击+,添加

RSKImageCropper.framework
QBImagePicker.framework

另外,需要在info.plist文件中,添加键值对,允许访问相册和相机

访问相机:NSCameraUsageDescription   
访问相册:NSPhotoLibraryUsageDescription

附其他参数:

<key>NSCameraUsageDescription</key>
<string>App需要您的同意,才能访问相机</string>

<key>NSPhotoLibraryUsageDescription</key>
<string>App需要您的同意,才能访问相册</string>

<key>NSContactsUsageDescription</key>
<string>App需要您的同意,才能访问通讯录</string>

<key>NSLocationAlwaysUsageDescription</key>
<string>App需要您的同意,才能始终访问位置</string>

<key>NSLocationUsageDescription</key>
<string>App需要您的同意,才能访问位置</string>

<key>NSLocationWhenInUseUsageDescription</key>
<string>App需要您的同意,才能在使用期间访问位置</string>

<key>NSMicrophoneUsageDescription</key>
<string>App需要您的同意,才能访问麦克风</string>

<key>NSBluetoothPeripheralUsageDescription</key>
<string>App需要您的同意,才能访问蓝牙</string>

<key>NSCalendarsUsageDescription</key>
<string>App需要您的同意,才能访问日历</string>

<key>NSAppleMusicUsageDescription</key>
<string>App需要您的同意,才能访问媒体资料库</string>

<key>NSHealthShareUsageDescription</key>
<string>App需要您的同意,才能访问健康分享</string>

<key>NSHealthUpdateUsageDescription</key>
<string>App需要您的同意,才能访问健康更新</string>

<key>NSMotionUsageDescription</key>
<string>App需要您的同意,才能访问运动与健身</string>

<key>NSRemindersUsageDescription</key>
<string>App需要您的同意,才能访问提醒事项</string>

以上为ios配置,详细配置以及android的配置可以参照github上的react-native- images -crop-picker官方项目介绍

其他相册选择第三方库:
react-native-camera-roll-picker
react-native-image-picker

2017-06-10 11:34:20 xiangzhihong8 阅读数 10851
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

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文件中添加权限:

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

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 = (<View style={styles.countBox}>
                <Text style={styles.count}>{photos.length}</Text>
            </View>);
        }
        return (
            <TouchableOpacity
                onPress={this.showImagePicker.bind(this)}
                style={[this.props.style,styles.cameraBtn]}>
                <View>
                    <Icon name="md-camera" color="#aaa" size={34}/>
                    {conText}
                </View>
            </TouchableOpacity>
        )
    }

    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'


                    <CameraButton style={styles.cameraBtn}
                                  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=>{ 
         //请求失败
    })

附:http://lib.csdn.net/article/reactnative/58022?knId=1415
使用fetch+formData实现图片上传

2019-03-02 12:30:24 sinat_31231955 阅读数 3024
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

我使用的技术栈是: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 实现扫描二维码及读取相册二维码的小结,感谢阅读。

2017-01-13 14:51:44 baidu_36259371 阅读数 7318
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

      最近写项目用到了二维码扫描,就去找了下,发现有个第三方的react-native-camera,支持android 和ios,功能还挺强大的,有兴趣的朋友可以去看下https://github.com/lwansbrough/react-native-camera。以下是我的自己写的一个仿微信样式写的二维码扫描。

    首先导入react-native-camera

  1. npm install react-native-camera@https://github.com/lwansbrough/react-native-camera.git --save
  2. react-native link react-native-camera

    import React from 'react';
    import {
        StyleSheet,
        TouchableOpacity,
        View,
        Text,
        InteractionManager,
        Animated,
        Easing,
        Platform,
        Image
    } from 'react-native';
    import Camera from 'react-native-camera';
    var Dimensions = require('Dimensions');
    var {width, height} = Dimensions.get('window');
    
    export default class CodeReading extends React.Component {
        constructor(props) {
            super(props);
            this.camera = null;
            this.state = {
                show:true,
                anim: new Animated.Value(0),
                camera: {
                    aspect: Camera.constants.Aspect.fill,
                },
            };
        }
        componentDidMount(){
            InteractionManager.runAfterInteractions(()=>{
               this.startAnimation()
            });
        }
        startAnimation(){
            if(this.state.show){
            this.state.anim.setValue(0)
            Animated.timing(this.state.anim,{
                toValue:1,
                duration:1500,
                easing:Easing.linear,
            }).start(()=>this.startAnimation());
            }
        }
        componentWillUnmount(){
            this.state.show = false;
        }
        //扫描二维码方法
        barcodeReceived = (e) =>{
            if(this.state.show){
                this.state.show = false;
                if (e) {
                    this.props.navigator.pop()
                    this.props.ReceiveCode(e.data)
                } else {
                    Alert.alert(
                        '提示',
                        '扫描失败'
                        [{text:'确定'}]
                    )
                }
            }
        }
    
        render() {
            return (
                <View style={styles.container}>
                    {/*导航条*/}
                    {this.renderNavBar()}
                    <Camera
                        ref={(cam) => {
                this.camera = cam;
              }}
                        style={styles.preview}
                        aspect={this.state.camera.aspect}
                        onBarCodeRead={this.barcodeReceived.bind(this)}
                        barCodeTypes = {['qr']}
                    >
                    <View style = {{height: Platform.OS == 'ios' ? (height-264)/3:(height-244)/3,width:width,backgroundColor:'rgba(0,0,0,0.5)',}}>
                    </View>
                        <View style={{flexDirection:'row'}}>
                            <View style={styles.itemStyle}/>
                                <Image style={styles.rectangle}
                                       source={require('../AssetsImages/code_bar.png')}>
                                    <Animated.View style={[styles.animatiedStyle, {
                    transform: [{
                        translateY: this.state.anim.interpolate({
                            inputRange: [0,1],
                            outputRange: [0,200]
                        })
                    }]
                }]}>
                                    </Animated.View>
                                </Image>
                            <View style={styles.itemStyle}/>
                        </View>
                        <View style={{flex:1,backgroundColor:'rgba(0, 0, 0, 0.5)',width:width,alignItems:'center'}}>
                            <Text style={styles.textStyle}>将二维码放入框内,即可自动扫描</Text>
                        </View>
                    </Camera>
                </View>
            );
        }
    
    
        // 导航条
        renderNavBar(){
            return(
                <View style={styles.navBarStyle}>
                    <TouchableOpacity
                        onPress={()=>{this.props.navigator.pop()}}
                        style={styles.leftViewStyle}>
                        <Image source={{uri:'nav_return'}}
                               style={{height:20,width:20}} />
                    </TouchableOpacity>
                    <Text style={[styles.navTitleStyle,{marginTop:Platform.OS == 'ios'?12:0,fontSize:20}]}>
                        二维码
                    </Text>
                </View>
            )
        }
    }
    
    const styles = StyleSheet.create({
        itemStyle:{
            backgroundColor:'rgba(0,0,0,0.5)',
            width:(width-200)/2,
            height:200
        },
        textStyle:{
            color:'#fff',
            marginTop:10,
            fontWeight:'bold',
            fontSize:18
        },
        navTitleStyle: {
            color:'white',
            fontWeight:'bold',
        },
        navBarStyle:{ // 导航条样式
            height: Platform.OS == 'ios' ? 64 : 44,
            backgroundColor:'rgba(34,110,184,1.0)',
            // 设置主轴的方向
            flexDirection:'row',
            // 垂直居中 ---> 设置侧轴的对齐方式
            alignItems:'center',
            justifyContent:'center'
        },
    
        leftViewStyle:{
            // 绝对定位
            // 设置主轴的方向
            flexDirection:'row',
            position:'absolute',
            left:10,
            bottom:Platform.OS == 'ios' ? 15:12,
            alignItems:'center',
            width:30
        },
        animatiedStyle:{
            height:2,
            backgroundColor:'#00FF00'
        },
        container: {
            flex: 1,
        },
        preview: {
            flex: 1,
        },
        rectangle: {
            height: 200,
            width: 200,
        }
    });
    运行效果如下图所示,扫描成功后得到返回值e.data,传回上一个页面展示。

2019-03-15 10:25:48 zhaihaohao1 阅读数 400
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

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

没有更多推荐了,返回首页