React Native模块之Permissions权限申请的实例相机
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了React Native模块之Permissions权限申请的实例相机的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
React Native模块之Permissions权限申请的实例详解
对于移动开发，我们知道Android 6.0之后对于权限管理做了很大的升级，其类似于IOS的管理管理方式需要用手动授权是否允许使用当前权限， 在RN开发中同样存在这样一个模块。
在RN中提供了一个PermissionsAndroid的模块， 可以访问Android M(也就是6.0)开始提供的权限模型。有一些权限写在AndroidManifest.xml就可以在安装时自动获得。但有一些“危险”的权限则需要弹出提示框供用户选择。本API即用于后一种情形。
在低于Android 6.0的设备上，权限只要写在AndroidManifest.xml里就会自动获得，此情形下check和request 方法将始终返回true。
async function requestCameraPermission() {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.CAMERA,
'title': 'Cool Photo App Camera Permission',
'message': 'Cool Photo App needs access to your camera ' +
'so you can take awesome pictures.'
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log("You can use the camera")
console.log("Camera permission denied")
} catch (err) {
console.warn(err)
check(permission)
返回一个promise，最终值为用户是否授权过的布尔值。
request(permission, rationale?)
弹出提示框向用户请求某项权限。返回一个promise，最终值为用户是否同意了权限申请的布尔值。
requestMultiple(permissions)
在一个弹出框中向用户请求多个权限。返回值为一个object，key为各权限名称，对应值为用户授权与否。
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具iOS 推送通知
为你的应用程序处理推送通知，包括权限的处理和图标标记数量。
为了启动和运行， 和服务器端系统。为了得到一个想法，这里是 。
static setApplicationIconBadgeNumber(number: number)
在主屏幕上为应用程序的图标设置标记数量
static getApplicationIconBadgeNumber(callback: Function)
在主屏幕上为应用程序的图标获取当前的标记数量
static addEventListener(type: string, handler: Function)
当应用程序在前台或者后台运行的时候，为了远程通知链接一个监听器。
处理程序将会以一个 PushNotificationIOS 的实例的形式被调用
static requestPermissions()
从iOS上请求所有的通知权限，提示用户对话框
static checkPermissions(callback: Function)
查看当前正被启用的推送权限。Callback 函数将被一个
permission 的对象调用：
alert :boolean
badge :boolean
sound :boolean
static removeEventListener(type: string, handler: Function)
删除事件监听器。为了防止内存泄露，该操作在 componentWillUnmount 里完成。
static popInitialNotification()
如果应用程序从一个通知被冷发射，那么一个原始通知将变成可用状态。
popInitialNotification 的第一个调用者将获取最初的通知对象，或者为 null。后续的调用将返回 null。
constructor(nativeNotif)
你自己可能永远都不需要 instansiate PushNotificationIOS。你只需要监听 notification 事件并且调用 popInitialNotification就足够了。
getMessage()
getAlert 的一个别名，该函数是为了获取通知的主要消息字符串
getSound()
从 aps 对象中获取声音字符串
getAlert()
从 aps 对象中获取通知的主要消息字符串
getBadgeCount()
从 aps 对象中获取标记数量
在通知上获取数据对象
'use strict';
var React = require('react-native');
PushNotificationIOS,
StyleSheet,
TouchableHighlight,
var Button = React.createClass({
render: function() {
&TouchableHighlight
underlayColor={'white'}
style={styles.button}
onPress={this.props.onPress}&
&Text style={styles.buttonLabel}&
{this.props.label}
&/TouchableHighlight&
class NotificationExample ponent {
componentWillMount() {
PushNotificationIOS.addEventListener('notification', this._onNotification);
componentWillUnmount() {
PushNotificationIOS.removeEventListener('notification', this._onNotification);
render() {
onPress={this._sendNotification}
label="Send fake notification"
_sendNotification() {
require('RCTDeviceEventEmitter').emit('remoteNotificationReceived', {
alert: 'Sample notification',
badge: '+1',
sound: 'default',
category: 'REACT_NATIVE'
_onNotification(notification) {
AlertIOS.alert(
'Notification Received',
'Alert message: ' + notification.getMessage(),
text: 'Dismiss',
onPress: null,
class NotificationPermissionExample ponent {
constructor(props) {
super(props);
this.state = {permissions: null};
render() {
onPress={this._showPermissions.bind(this)}
label="Show enabled permissions"
{JSON.stringify(this.state.permissions)}
_showPermissions() {
PushNotificationIOS.checkPermissions((permissions) =& {
this.setState({permissions});
var styles = StyleSheet.create({
padding: 10,
alignItems: 'center',
justifyContent: 'center',
buttonLabel: {
color: 'blue',
exports.title = 'PushNotificationIOS';
exports.description = 'Apple PushNotification and badge value';
exports.examples = [
title: 'Badge Number',
render(): ponent {
PushNotificationIOS.requestPermissions();
onPress={() =& PushNotificationIOS.setApplicationIconBadgeNumber(42)}
label="Set app's icon badge to 42"
onPress={() =& PushNotificationIOS.setApplicationIconBadgeNumber(0)}
label="Clear app's icon badge"
title: 'Push Notifications',
render(): ponent {
return &NotificationExample /&;
title: 'Notifications Permissions',
render(): ponent {
return &NotificationPermissionExample /&;React Native使用react-navigation时,设置navigationOptions中Static中使用this注意点
时间： 10:40:33
&&&& 阅读：1189
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&使用react-navigation时,单页面设置navigationOptions中,进行Static中调用方法,不能像以下设置
onPress = {()=&this.clickFinishButton()}
export default class extends Component {
static navigationOptions = ({
navigation,
screenProps
headerTitle: ‘List实现多选‘,
headerTitleStyle: {
color: ‘white‘
headerStyle: {
backgroundColor: Color.kMainColor // 设置导航栏的背景颜色,headerTintColor设置无效
headerRight:(
&NavigationItem
title=‘完成‘
// 这里注意: static里面不能使用this调用方法,出现clickFinishButton is not function
// 参考博客: /p/2f575cc35780
// onPress={()=&navigation.state.params.navigatePress()}
onPress = {()=&this.clickFinishButton()}
export default class extends Component {
static navigationOptions = ({
navigation,
screenProps
headerTitle: ‘List实现多选‘,
headerTitleStyle: {
color: ‘white‘
headerStyle: {
backgroundColor: Color.kMainColor // 设置导航栏的背景颜色,headerTintColor设置无效
headerRight:(
&NavigationItem
title=‘完成‘
// 这里注意: static里面不能使用this调用方法,出现clickFinishButton is not function
// 参考博客: /p/2f575cc35780
onPress={()=&navigation.state.params.navigatePress()}
// onPress = {()=&this.clickFinishButton()}
componentDidMount(){
// 处理数据源
this.handlerDataSource();
this.props.navigation.setParams({navigatePress:this.clickFinishButton})
// 点击完成按钮
clickFinishButton = ()=& {
alert(‘哈哈‘);
let data = this.state.dataA
let selectResultArr = [];
for (var index in data) {
var element = object[index];
if (element.isSelected) {
selectResultArr.push(element);
alert(selectResultArr.length);
&标签：&&&&&&&&&&&&&&&&&&&&&&&&&&&原文：/pengsi/p/7088401.html
教程昨日排行
&&国之画&&&& &&&&&&
&& &&&&&&&&&&&&&&
鲁ICP备号-4
打开技术之扣，分享程序人生！因为公司业务的需要，不得不开始研究react-native，至于react有哪些优势呢，网上已经一大堆分析了，我就不多啰嗦了，目前这玩意是要征服三端啊，PC、IOS、安卓！如此甚火，诸多公司都开始广泛使用起来，小弟也是废了一番周折，才把环境搭建起来，DEMO跑起来。一个感受是：坑太多了，环境搭建真麻烦。。。下面给大家分享下搭建流程（这里主要是windows环境下搭建安卓，至于IOS的搭建比安卓简单多了，就不详细说了）
一、安装Java JDK直接给出传送门去下载吧 ，根据自己电脑的类型，选择合适的版本。安装完后，打开CMD，输入 java -version检测是否安装成功，另外成功后需要配置环境变量。
12新增变量
，变量值 C:\Program Files\Java\jdk1.8.0_73（根据自己安装路径定） 编辑环境变量path，在后面新增 %JAVA_HOME%\bin;
二、安装Android SDK下载Android SDK或者androiddevtools，同意安装完后需要配置环境变量而且非常重要12新增变量 ANDROID_HOME，变量值 D:\hepf\Android\sdk（SDK所在的位置）编辑环境变量path，在后面新增（PATH =& %ANDROID_HOME%\%ANDROID_HOME%\platform-tools）
另外里面的资源可能有些访问不了 需要VPN或者代理 去下载！
三、安装node去官网下载node，直接给出传送门：，下载稳定版，安装后 输入指令 node -v 来检测
四、安装react-native-cli1输入指令 npm install -g react-native-cli
五、创建项目1CMD里输入指令
react-native init yourProjectName
六、安装安卓虚拟机环境下载genymotion-2.6.0-vbox 和 genymotion_vbox86tp_4.4.4_703.ova，前者是虚拟机，后者类似于一个镜像文件可以直接导入到虚拟机中，如果没有第二个镜像文件，可以手动通过虚拟机创建。安装后如下图所示
七、react-native run-android回到我们刚才创建的项目目录，CMD中 输入 react-native run-android ，指行会下载一堆东西。注意了下面是重点
界面会出现 DOWNLOADING https\://services.gradle.org/distributions/gradle-2.4-all.zip这个包是用来编译和打包安卓程序的，而且非常大，很多人网络不好就会卡在这里，下载不了资源，我建议赋值这个链接手动把这个包下载下来。下载后放到哪里呢？
1、我们找到项目根目录 android&gradle&wrapper ，将压缩包放在此目录，另外编辑gradle-wrapper.properties 这个文件 ，注释掉distributionUrl这行，添加新的一行如下：123456distributionBase=GRADLE_USER_HOMEdistributionPath=wrapper/distszipStoreBase=GRADLE_USER_HOMEzipStorePath=wrapper/distsdistributionUrl=gradle-2.4-all.zip
让程序运行时，直接调用本地目录下的gradle-2.1-all.zip 这个包
2、拷贝一份gradle-2.1-all.zip 解压到C盘任意位置，接着创建环境变量12增加变量
变量值 C:\hepf\gradle-2.4 （解压的路径）编辑path变量 在后面增加 %GRADLE_HOME %\bin;
增加上面的环境变量的目的 ，是为了在编译过程中调用 gradle指令。
上面2个步骤配置完毕后，执行速度就非常快了，执行完毕后 程序会被打包成apk安装到模拟器中
八、react-native start看其他人的教程中 说 先运行这个，在运行react-native run-android。我觉得呢，这个命令可以在 react-native run-android之前执行，也可以在之后执行，并没有什么大的影响相当于启动一个服务，动态去编译脚本、图片、安卓资源等等
九、配置模拟器的WIFI和IP模拟器一定要链接上wifi，IP一定要和本机的IP一样，端口设置为8081，这样模拟器就能访问到 然后请求我们上一步开启的服务。
十、代理设置如果本地的网络是用过代理上网的，那么就需要设置gradle 和 模拟器wifi的代理
1、gradle 代理设置 项目目录下android&gradle.properties 编辑这个文件 输入代理的IP地址和端口12345678910android.useDeprecatedNdk=truesystemProp.http.proxyHost=192.168.20.6systemProp.http.proxyPort=3128systemProp.http.nonProxyHosts=localhostsystemProp.https.proxyHost=192.168.20.6systemProp.https.proxyPort=3128systemProp.https.nonProxyHosts=localhost
2、wifi代理设置划出模拟器的状态栏 ，就是手机界面的状态栏，里面有个wifi 连接图标。点击wifi图标，看下面图片流程
经过这几个设置，手机模拟器就可以通过代理上网了。
总结：可能在安装过程中 还会遇到很多细节的问题，我没有仔细写全，但大部分原因可以归纳为1、有可能资源请求不了（需要有VPN）2、环境变量没有配置好3、安卓SDK没有装全4、人品问题
阿鹏就为大家介绍到这里了，有不懂的可以留言或者加QQ群 ： ，博客首页有微信和微博联系方式欢迎大家咨询！React&Native常见问题
Q：RN和React.js是一个东西吗？
A：RN和React.js共用一些抽象层，但具体有很多差异，且目标平台不同：RN目前只能开发iOS/Android
App，而React.js用于开发web页面。
Q：RN有哪些已经上架的案例？
A：官方最近推出了一个由爱好者自行提交的页面。
Q：RN可以在windows下开发吗？
A：对于iOS开发，可以通过虚拟机等方式，但很麻烦也不推荐。做iOS开发，迟早你都需要一台Mac电脑。
对于Android开发，理论上没问题。但由于FB的员工基本都用mac，没有怎么管过windows兼容性，所以目前的版本可能在windows上会遇到一些问题。
具体搭建方法可参考：
@天地之灵 总结的， @change 同学也写了个更详细的
Q：RN所支持的最低iOS和Android版本？
A：Android &= 4.1 (API 16)
iOS &= 7.0
Q：RN和cordova/phonegap是一个东西吗？
A：不一样。RN不是一个webview（但包含了webview组件），不能直接复用web页面代码。RN的性能接近原生，超过cordova/phonegap。
Q：可以使用现有的js库吗？
A：由于RN理论上更接近nodejs的运行环境，所以对nodejs的库兼容更好一些。浏览器端的js库，涉及到DOM、BOM、CSS等功能的模块无法使用，因为RN的环境中没有这些东西。
Q：可以使用现有的objc/swift/java库吗？
A：可以，但需要参照和进行修改。
环境搭建与编译问题
Q：创建新项目，react native init xxx命令长时间无响应，或报错shasum check
A：由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像：
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
另，执行init时切记不要在前面加上sudo（否则新项目的目录所有者会变为root而不是当前用户，导致一系列权限问题，请使用chown修复）。
11月1日更新：提供了完整的绿色纯净新项目包。完整打包全部iOS和Android的第三方依赖，只要环境配置正确，无需科学上网漫长等待，即可直接运行。
Q：报错EACCES: permission denied, open
'Users/你的用户名/.babel.json'
A：执行如下命令：
sudo chown 你的用户名 ~/.babel.json
Q：如何升级RN版本？
A：请用编辑器打开项目目录中的package.json，找到类似下面的一行配置
"react-native": "0.13.0",
将其改为要升级的版本号，如“0.15.0-rc”（当然要先确定这个版本已经发布到npm上了，如果配置中有^或~之类的符号，可以参考这篇来了解其含义。）。
然后在当前目录的命令行中执行npm i
如果提示权限错误则在前面加上sudo（windows下不需要）.
npm i执行完毕且成功不报错之后，在项目目录中运行
react-native upgrade
对于0.14以下版本升级0.14的情况，还需要额外一下。
Q：报错：EMFILE, too many open files '......'
A：请检查node版本（4.0以上），以及是否安装了watchman（目前只有Mac能装这个）
Q：报错：SyntaxError: Use of const in strict mode
A：请检查node版本（4.0以上）。
Q：Windows下报错：ERROR& Watcher took too long to
Try running `watchman version` from your terminal
A：启动packager.js时多传一个--nonPersistent参数。
Q：报错：Invariant Violation:Application XXXX has not been
registered.
A：请确保index.ios.js中的
AppRegistry.registerComponent('项目名',() =& ...);
与appDelegate.m中的
RCTRootView*rootView =
[[RCTRootViewalloc]initWithBundleURL:jsCodeLocation
moduleName:@"项目名" launchOptions:launchOptions];
或是MainActivity.java中的
mReactRootView.startReactApplication(mReactInstanceManager,
"项目名", null);
都保持一致。
Q：应该使用什么IDE开发？
A： 虽然常用的JS编辑器很多，但由于RN大量使用jsx和es6语法，目前只有sublime
text（通过插件）和webstorm（10以上版本）提供了良好的支持。笔者推荐webstorm，因为它有更完善的语法提示和补全。另外虽然主要的
业务逻辑是使用js开发，但仍然要依赖于原生的编译/调试环境，所以你还需要同时运行Xcode（iOS）或Android
Studio（android）等。
开发与调试问题
Q：如何开启调试功能？
A：点击iOS模拟器顶部的Hardware菜单，选择Shake
Gesture（对应真机摇一摇），会自动弹出如下图的菜单。
安卓模拟器则是点击菜单键，真机上没有菜单键的，摇一摇即可。
选 择Debug in
Chrome即会启动Chrome作为运行和调试环境（注意此时JS引擎为Chrome的V8，与iOS真机的javascriptCore引擎存在一些
差异）。选择Inspect Element即可以像调试网页元素一样查看布局元素的样式，但比较简陋。React
Devtools插件可装可不装，它只用来查看布局，不影响调试，且在目前的版本（&0.13）中还无法正常加载。
Q：调试模式下报错：Runtime is not ready. Make sure...或是socket closed.
A：有时Chrome进程会失去响应，可以尝试手动将Chrome的React Native
Debugger标签切换到前台再Reload模拟器页面。
Q：使用ListView时报错：Sticky header index 0 was outside the range
A：看起来是个数组越界错误，但多数情况下是由于ListView的子组件渲染错误（如套数据时没有检查undefined等）引起，而非ListView本身的问题。
Q：ListView的数据到底应该怎么配？
A：参考下图
<img STYLE="top: 5698 left: 330 width: 735 height: 547" src="/blog7style/images/common/sg_trans.gif" real_src ="http://upload-images.jianshu.io/upload_images/b079d98f74d7d07.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240" NAME="image_operate_97041"
ALT="React&Native常见问题"
TITLE="React&Native常见问题" />
Q：require静态图片时报找不到模块的错误
A：参看下图步骤，尤其需要注意的点是文件名必须和imageset的名字一致。（注：这里演示的是0.14之前版本的添加图片的步骤。0.14之后的图片用法）
<img DATA-ORIGINAL-src="/blog7style/images/common/sg_trans.gif" real_src ="http://upload-images.jianshu.io/upload_images/581ea.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240" SRC="http://upload-images.jianshu.io/upload_images/581ea.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240" NAME="image_operate_3460"
ALT="React&Native常见问题"
TITLE="React&Native常见问题" />
Q：使用Image时报错：You are trying to render the global Image variable
as a React element. You probably forgot to require Image.
A：由于React的Image组件和全局的Image对象重名，所以使用Image组件时一定要记得在文件开头正确引入React的Image组件。
Q：在使用Navigator的同时使用ListView或ScrollView，后两者的头部会多出一些空间。
A：将automaticallyAdjustContentInsets属性设为{false}.
Q：有一些示例代码中有奇怪的问号，比如function foo(x:?string)，代表什么意思？
A：这是通过一个名为的外部工具为javascript加上强类型检查的功能，不影响编译和运行。
Q：报错：Adjacent JSX elements must be wrapped in an enclosing
A：render方法中必须只能包含一个根元素。
Q：报错：Invariant Violation: onlyChild must be passed a children
with exactly one child
A：一般是Touchable开头的几个组件，如果没有子元素或者指定多个并列子元素都会报错。
Q：如何获取服务器端数据/可以使用Ajax吗？
A：可以用ajax，以及大部分现有的ajax库，而且不受浏览器跨域限制。官方推荐用更简单的fetch
api来替代传统的ajax.但目前还无法在Chrome中直接观测请求的详情。
Q：如何读写文件？如何调用摄像头？如何调用麦克风？等等
A：对于官方没有提供的组件或API，请自行在或中搜索第三方实现。如果搜不到相关结果，你只能考虑自己用原生代码实现后进来。
Q：如何在原生代码中调用JS方法？
A：请参阅官网中一节文档，其中提供了回调Callbacks和监听事件两种方法，且都为异步。
//To be continued
转：/p/fa0c19a31656
已投稿到：