React Native的照相机和图片

react-native-image-picker

如果要实现多个图像选择，裁剪，压缩等功能需要 react-native-image-crop-picker

安装

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

环境配置

1.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()

属性

完整的代码

import ImagePicker from 'react-native-image-picker';import { Platform, StyleSheet, Text, View, PixelRatio, TouchableOpacity, Image, } from 'react-native';const instructions = Platform.select({ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu',}); export default class App extends Component { state = { avatarSource: null, videoSource: null }; //选择图片 selectPhotoTapped() { const options = {title: '选择图片', //标题cancelButtonTitle: '取消',//取消按钮 takePhotoButtonTitle: '拍照', //拍照按钮chooseFromLibraryButtonTitle: '选择照片',//从图库选择图片 customButtons: [{name: 'fb', title: 'Choose Photo from Facebook'},],//自定义按钮cameraType: 'back', //类型 'front' or 'back'mediaType: 'photo',//图片或视频 'photo', 'video', or 'mixed' on iOS, 'photo' or 'video' on Android videoQuality: 'high', //视频质量durationLimit: 10, //最大视频录制时间maxWidth: 300, //图片最大宽度maxHeight: 300,//图片最大高度quality: 0.8,//图片质量angle: 0, //allowsEditing: false,//是否可以编辑noData: false, //如果true 则禁用data生成的base64字段，（极大地提升图片的性能）storageOptions: { skipBackup: true } //如果为true该照片不会备份到iCloud}; ImagePicker.showImagePicker(options, (response) => {console.log('Response = ', response);if (response.didCancel) {console.log('User cancelled photo picker');} else if (response.error) {console.log('ImagePicker Error: ', response.error);} else if (response.customButton) {console.log('User tapped custom button: ', response.customButton); } else { let source = { uri: response.uri }; // You can also display the image using data:// let source = { uri: 'data:image/jpeg;base64,' + response.data }; this.setState({ avatarSource: source });} });} //选择视频selectVideoTapped() {const options = { title: '选择视频',cancelButtonTitle: '取消',takePhotoButtonTitle: '录制视频',chooseFromLibraryButtonTitle: '选择视频', mediaType: 'video', videoQuality: 'medium' }; ImagePicker.showImagePicker(options, (response) => { console.log('Response = ', response); if (response.didCancel) { console.log('User cancelled video picker'); } else if (response.error) { console.log('ImagePicker Error: ', response.error);} else if (response.customButton) { console.log('User tapped custom button: ', response.customButton); } else { this.setState({ videoSource: response.uri });} }); }render() {return (<View style={styles.container}><TouchableOpacity onPress={this.selectPhotoTapped.bind(this)}> <View style={[styles.avatar, styles.avatarContainer, {marginBottom: 30}]}>{ this.state.avatarSource === null ?<Text>选择照片</Text> : <Image style={styles.avatar} source={this.state.avatarSource} /> } </View> </TouchableOpacity><TouchableOpacity onPress={this.selectVideoTapped.bind(this)}><View style={[styles.avatar, styles.avatarContainer]}> <Text>选择视频</Text> </View></TouchableOpacity> { this.state.videoSource && <Text style={{margin: 8, textAlign: 'center'}}>{this.state.videoSource}</Text> }</View> );} } const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF' },avatarContainer: { borderColor: '#9B9B9B', borderWidth: 1 / PixelRatio.get(), justifyContent: 'center', alignItems: 'center' }, avatar: { borderRadius: 50, width: 100, height: 100 } });

React Native的照相机和图片相关推荐

刚刚在用的React Native的照相机和图片 react-native-image-picker
前言最近在做RN项目,记录一下用到的一点关于照相机和图片选择的知识, react-native-image-picker的GtiHub地址,了解这些属性如果要实现多个图像选择,裁剪,压缩等功能需要 ...
React Native与原生的图片交互问题
项目中的一个需求:在原生系统中调用第三方SDK识别身份证后将获取的信息和图片返回到React Native JSX页面上展示. 首先React Native与原生通信的方式可以采用CallBack 和 ...
React Native - 使用CameraRoll将图片保存到本地相册
PS: 以下内容经过本人亲自尝试证明在IOS设备上简单有效 // IOS需要授权认证才允许保存图片,非常重要,记得配置: 由于苹果安全策略更新,还需要在 Info.plist 配置请求照片相的关描述 ...
react native学习篇之图片学习
一.本地图片加载完成一个图片列表的加载 1.可以将图片放入至iOS和Android的相对应的文件夹中在IOS文件夹的Images.xcassets下新增一个注意:iOS 中的图片需要Xcode中 ...
[RN] React Native 实现图片预览
[RN] React Native 实现图片预览效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...
React Native图片缓存解决方案
React Native图片缓存解决方案参考文章: (1)React Native图片缓存解决方案 (2)https://www.cnblogs.com/allenxieyusheng/p/9122 ...
React Native - 使用图片选择器react-native-image-picker拍照、选照片
http://www.hangge.com/blog/cache/detail_1617.html React Native - 使用图片选择器react-native-image-picker拍照. ...
React Native等比放大不丢失图片
9月11号 0.33版本,resizeMode中添加了center, 可以实现一样的功能.不过希望这篇文章还能帮助大家. 之前我们学习了从零学React Native之08Image组件大家可以发现 ...
native react 图片多选_React Native中加载图片的各种姿势
初使用Image,由于在React Native中图片资源来源丰富,刚开始我也是一脸懵逼,在几番尝试以后,终于了然加载项目目录图片在项目目录中新建一个Directory,命名img,拷贝一张名为' ...

React Native的照相机和图片

react-native-image-picker

React Native的照相机和图片相关推荐

最新文章

热门文章