时间戳

首页 > 解决方案 > 在反应中单击按钮时如何提示相机权限？

react-native - 在反应中单击按钮时如何提示相机权限？

问题描述

已解决！：检查下面的一个回复。它解决了它。但是，在你允许拍照后，当你再次点击按钮时，它不会再次提示，这是很自然的。您必须再次从模拟器或手机的设置中拒绝摄像头才能再次提示。

我基本上是在尝试这样做：单击时的按钮；它会提示用户相机权限，做出反应。在我当前的应用程序中，它会在首次启动应用程序时询问。我尝试了各种方法来用按钮实现它，但无济于事。但是这段代码有效，没有错误。这是我的 app.js：

import React, {Component} from 'react'
import {StyleSheet, View, Text, Button} from 'react-native'
import {Permission, PERMISSION_TYPE} from 'D:/Reactdeneme/reacttest/src/AppPermission'

export default class App extends Component {
  componentDidMount() {

    Permission.checkPermission(PERMISSION_TYPE.camera)
//this the thing that prompts the camera permission. I want this in a button.
  }
render() {
  return (
    <View style={styles.container}>
    <Text style={{fontSize: 30}}>izinler</Text>
    </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

这部分可能是可选的，所以请不要害怕长代码块。这也是我的 AppPermissions.js：

import {check, request, PERMISSIONS, RESULTS} from 'react-native-permissions';
import {Platform} from 'react-native'

const PLATFORM_CAMERA_PERMISSIONS= {
    ios:PERMISSIONS.IOS.MICROPHONE,
    android: PERMISSIONS.ANDROID.CAMERA
}


const REQUEST_PERMISSION_TYPE = {
    camera: PLATFORM_CAMERA_PERMISSIONS
}

const PERMISSION_TYPE= {
    camera: 'camera'
}

class AppPermission {

    checkPermission= async (type): Promise<boolean> => {
        console.log("AppPermission checkPermission type:", type)
        const permissions = REQUEST_PERMISSION_TYPE[type][Platform.OS]
        console.log("AppPermission checkPermission permissions:", permissions)
        if(!permissions){
            return true
        }
        try {
        const result = await check(permissions)
        console.log("AppPermission checkPermission result:", result)
        if (result === RESULTS.GRANTED) return true
        return this.requestPermission(permissions)
        } catch (error) {
            console.log("AppPermission checkPermission error:", error)
            return false
        }
    }

    requestPermission=async(permissions): Promise<boolean> => {
        console.log("AppPermission requestPermission permissions:", permissions)

try {
    const result = await request(permissions)
    console.log("AppPermission requestPermission result:", result)
    return result === RESULTS.GRANTED
}catch(error) {
    console.log("AppPermission requestPermission error:", error)

    return false
}

    }
}

const Permission = new AppPermission()
export {Permission, PERMISSION_TYPE}

标签： react-native

解决方案

您应该阅读更多 react-native 文档。移除 componentDidMount 中的 checkPermission 并将其添加到 Button 的 onPress 属性中。

import React, {Component} from 'react'
import {StyleSheet, View, Text, Button} from 'react-native'
import {Permission, PERMISSION_TYPE} from 'D:/Reactdeneme/reacttest/src/AppPermission'

export default class App extends Component {
    checkPermission = () => {
        Permission.checkPermission(PERMISSION_TYPE.camera);
    }

    render() {
        return (
            <View style={styles.container}>
                <Text style={{fontSize: 30}}>izinler</Text>
                <Button title="Check" onPress={this.checkPermission}/>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
})

推荐阅读