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

把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. json_decode 为空

    传递参数 wsk/addorder?goods=[{"gsn":802006,"number":1},{"gsn":103761," ...

  2. 【QT】error: 'SIGNAL' was not declared in this scope

    error: 'SIGNAL' was not declared in this scope  未在此范围内声明. connect(ui->Btnshowhello,SIGNAL(clicked ...

  3. ORA-01841: (full) year must be between -4713 and +9999,

    OGG报错日志: 2018-09-21 08:52:39 WARNING OGG-01003 Oracle GoldenGate Delivery for Oracle, rep_1b.prm: Re ...

  4. RabbitMQ----整理

    ------------------------------------------------------------------RabbitMQ-------------------------- ...

  5. nunit2.5.7 单元测试时提示:“当前不会命中断点 还没有为该文档加载任何符号”

    解决方案: 因为项目的“目标框架”是.net4.5 所以要将对应的 nunit.exe.config 或 nunit-x86.exe.config 文件中加上: <startup> < ...

  6. easyui datagrid 去掉外边框及行与行之间的横线标题字体

    这是以前写的一个项目中写的东西,为了让datagrid样式好看,所有做的这个处理: 今天同事又问到于是记录下来 $('#id').datagrid({ width: '99%', height: 15 ...

  7. Windows8下安装ubuntu

    这类文章堪称多如牛毛,也有很多种方法.此处记录的是我试验成功的一种,Windows 8 + ubuntu + easyBCD,简单粗暴,只记操作,不讲原理. 一.腾空间 在Windows下,首先要给u ...

  8. CH 1401 - 兔子与兔子 - [字符串hash]

    题目链接:传送门 描述 很久很久以前,森林里住着一群兔子.有一天,兔子们想要研究自己的 DNA 序列.我们首先选取一个好长好长的 DNA 序列(小兔子是外星生物,DNA 序列可能包含 26 个小写英文 ...

  9. [No0000B3].NET C# 单体模式(Singleton)

    单体模式(Singleton)是经常为了保证应用程序操作某一全局对象,让其保持一致而产生的对象,例如对文件的读写操作的锁定,数据库操作的时候的事务回滚,还有任务管理器操作,都是一单体模式读取的.创建一 ...

  10. sess.run(tf.global_variables_initializer()) 做了什么?

    当我们训练自己的神经网络的时候,无一例外的就是都会加上一句 sess.run(tf.global_variables_initializer()) ,这行代码的官方解释是 初始化模型的参数.那么,它到 ...