效果图,因为我用的是模拟器,所以拍照功能没有效果,不过可从相册选择,下面是具体的效果图

把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设置的更多相关文章

  1. 如何用 React Native 创建一个iOS APP?(三)

    前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...

  2. 如何用 React Native 创建一个iOS APP?(二)

    我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...

  3. 如何用 React Native 创建一个iOS APP?

    诚然,React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 Reac ...

  4. React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton)

    React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton) 一,需求与简单介绍 在开发项目时发现RN没有给提供RadioButton和Rad ...

  5. 封装 React Native 原生组件(iOS / Android)

    封装 React Native 原生组件(iOS / Android) 在 React Native中,有很多种丰富的组件了,例如 ScrollView.FlatList.SectionList.Bu ...

  6. React Native热更新(iOS)-Pushy

    React Native的出现,使的开发iOS代码出现了更便捷的方式.由于RN是使用脚本语言编写的,实现了"解释执行"的方式,而这种执行方式的修改只需替换脚步即可,不需要重新发布程 ...

  7. React Native项目集成iOS原生模块

    今天学习一下怎么在React Native项目中集成iOS原生模块,道理和在iOS原生项目中集成React Native模块类似.他们的界面跳转靠的都是iOS原生的UINavigationContro ...

  8. React Native环境搭建(iOS、Mac)

    http://reactnative.cn/docs/0.42/getting-started.html#content 1.安装Homebrew Homebrew, Mac系统的包管理器,用于安装N ...

  9. React Native 组建之IOS和Android通用抽屉

    /** * Sample React Native App * https://github.com/facebook/react-native * @flow *npm:https://www.np ...

  10. React Native区分安卓/iOS平台

    import { Platform, } from 'react-native'; alert(JSON.stringify(Platform)): android手机弹出:{"OS&quo ...

随机推荐

  1. Java中浮点数的处理

    import java.text.DecimalFormat; String addGold = String.valueOf(new DecimalFormat("0").for ...

  2. [UFLDL] Dimensionality Reduction

    博客内容取材于:http://www.cnblogs.com/tornadomeet/archive/2012/06/24/2560261.html Deep learning:三十五(用NN实现数据 ...

  3. Pyhthon爬虫其之验证码识别

    背景 现在的登录系统几乎都是带验证手段的,至于验证的手段也是五花八门,当然用的最多的还是验证码.不过纯粹验证码识已经是很落后的东西了,现在比较多见的是滑动验证,滑动拼图验证(这个还能往里面加广告).点 ...

  4. 如何用Baas快速在腾讯云上开发小程序-系列2:搭建Phabricator开发管理平台

    版权声明:本文由贺嘉 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/905333001487424158 来源:腾云阁 h ...

  5. React性能分析利器来了,妈妈再也不用担心我的React应用慢了(转)

    Profiler React16.5正式在devtool中加入了Profiler功能,用于收集每次变更导致的渲染时间,帮助开发者发现潜在的性能问题,有助于开发更高性能的React应用 官方博客 如何使 ...

  6. nodejs XML和json互相转换

    Docs: https://www.npmjs.com/package/fast-xml-parser const xml = ` <user> <name>ajanuw< ...

  7. tsm 切记

    切记不可删除节点,如果删除下面带的数据也会删除

  8. db2 MON_GET_PKG_CACHE_STMT 表函数 抓取分析SQL

    MON_GET_PKG_CACHE_STMT 表函数 还可以使用 MON_GET_PKG_CACHE_STMT 表函数来查询当前 PACKAGE CACHE 中 SQL 语句(包括动态 SQL 和静态 ...

  9. Mac上的jdk

    最近装jdk从网上找到的资料: 一.以前版本的Mac自带了的JDK6,安装在目录:/System/Library/Java/JavaVirtualMachines/1.6.0.jdk/下.* JDK7 ...

  10. 查看CUDA和cuDNN的版本号

    1.查看cuda版本 cat /usr/local/cuda/version.txt2.查看cudnn版本 cat /usr/local/cuda/include/cudnn.h | grep CUD ...