react-native-image-picker iOS设置
效果图,因为我用的是模拟器,所以拍照功能没有效果,不过可从相册选择,下面是具体的效果图
把react-native-image-picker添加到项目
yarn add react-native-image-picker
plist文件设置
<key>NSPhotoLibraryUsageDescription</key>
<string>$(PRODUCT_NAME) would like access to your photo gallery</string>
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) would like to use your camera</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) would like to your microphone (for videos)</string>
xcode设置:
1.In the XCode's "Project navigator", right click on your project's Libraries folder ➜ Add Files to <...>.
2.Go to node_modules ➜ react-native-image-picker ➜ ios ➜ select RNImagePicker.xcodeproj.
Add RNImagePicker.a to Build Phases -> Link Binary With Libraries.
代码集成步骤:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/ import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View, TouchableOpacity,Image
} from 'react-native';
import ImagePicker from 'react-native-image-picker';
export default class MyApp extends Component { constructor(props){
super(props)
this.state={
avatarSource:null
}
} render() {
const photoOptions = {
title: '请选择',
quality: 0.8,
cancelButtonTitle: '取消',
takePhotoButtonTitle: '拍照',
chooseFromLibraryButtonTitle: '选择相册',
allowsEditing: true,
noData: false,
storageOptions: {
skipBackup: true,
path: 'images'
}
}; return (
<View style={styles.container}>
<TouchableOpacity onPress = {()=>{
ImagePicker.showImagePicker(photoOptions, (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 {
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
});
}
});
}}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</TouchableOpacity>
<Image source={this.state.avatarSource} style={{width:100,height:100}}/>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
}); AppRegistry.registerComponent('MyApp', () => MyApp);
react-native-image-picker iOS设置的更多相关文章
- 如何用 React Native 创建一个iOS APP?(三)
前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...
- 如何用 React Native 创建一个iOS APP?(二)
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...
- 如何用 React Native 创建一个iOS APP?
诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...
- React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton)
React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton) 一,需求与简单介绍 在开发项目时发现RN没有给提供RadioButton和Rad ...
- 封装 React Native 原生组件(iOS / Android)
封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...
- React Native热更新(iOS)-Pushy
React Native的出现,使的开发iOS代码出现了更便捷的方式.由于RN是使用脚本语言编写的,实现了"解释执行"的方式,而这种执行方式的修改只需替换脚步即可,不需要重新发布程 ...
- React Native项目集成iOS原生模块
今天学习一下怎么在React Native项目中集成iOS原生模块,道理和在iOS原生项目中集成React Native模块类似.他们的界面跳转靠的都是iOS原生的UINavigationContro ...
- React Native环境搭建(iOS、Mac)
http://reactnative.cn/docs/0.42/getting-started.html#content 1.安装Homebrew Homebrew, Mac系统的包管理器,用于安装N ...
- React Native 组建之IOS和Android通用抽屉
/** * Sample React Native App * https://github.com/facebook/react-native * @flow *npm:https://www.np ...
- React Native区分安卓/iOS平台
import { Platform, } from 'react-native'; alert(JSON.stringify(Platform)): android手机弹出:{"OS&quo ...
随机推荐
- Spring 3 Java Based Configuration with @Value
Springsource has released the Javaconfig Framework as a core component of Spring 3.0. There is a tre ...
- [GPU] DIY for Deep Learning Workstation
Link: jcjohnson/cnn-benchmarks Ref: Build a super fast deep learning machine for under $1,000 Graphi ...
- [Full-stack] 网页布局艺术 - Less
故事背景 一个过程: template/html ----> css ----> less ----> bootstrap/flex ----> Semantic-ui fle ...
- The last packet successfully received from the server was 20,519 milliseconds ago. The last packet sent successfully to the server was 0 milliseconds ago.
本地升级了下MySQL的版本,从5.6升为5.7,数据文件直接拷贝的,项目查询数据库报错: Could not retrieve transation read-only status server ...
- C++服务器下载文件的两种方式
#include <afxinet.h>#include "wininet.h" #pragma comment( lib, "wininet.lib&quo ...
- python 中的流程控制语句
原文 if 语句 >>> x = int(input("Please enter an integer: ")) Please enter an integer: ...
- C++编程相关工具
1 文档类 (1) Doxygen 参考站点:http://www.doxygen.org Doxygen是一种适合C风格语言(如C++.C.IDL.Java甚至包括C#和PHP)的.开放源码的 ...
- 夺冠概率|2012年蓝桥杯B组题解析第九题-fishers
(17')夺冠概率 足球比赛具有一定程度的偶然性,弱队也有战胜强队的可能. 假设有甲.乙.丙.丁四个球队.根据他们过去比赛的成绩,得出每个队与另一个队对阵时取胜的概率表: 甲 乙 丙 丁 甲 - 0. ...
- ERP项目实施记录02
今天去第三方公司(B公司)考察: 公司成立:2011年12月 注册地:深圳 深圳:2~3个业务员 东莞:5个开发人员,据说也是实施人员 全功能者:BOSS A公司因战略调整,要将业务"下放& ...
- {MySQL数据库初识}一 数据库概述 二 MySQL介绍 三 MySQL的下载安装、简单应用及目录介绍 四 root用户密码设置及忘记密码的解决方案 五 修改字符集编码 六 初识sql语句
MySQL数据库初识 MySQL数据库 本节目录 一 数据库概述 二 MySQL介绍 三 MySQL的下载安装.简单应用及目录介绍 四 root用户密码设置及忘记密码的解决方案 五 修改字符集编码 六 ...