在反应中单击按钮时如何提示相机权限? [英] How to prompt camera permission when a button is clicked in react?

问题描述

我基本上是想这样做:一个按钮，当点击时；作为反应，它会提示用户获得相机许可.在我当前的应用程序中，它会在首次启动应用程序时询问.我尝试了各种方法来实现它的按钮，但无济于事.但是这段代码有效，没有错误.这是我的 app.js:

I am basically trying to do this: a button, when clicked; it will prompt the user of camera permission, in react. In my current app here, it asks on first launch of the app. I tried various ways to implement it with button, but to no avail. But this code works, without error. Here is my 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:

THIS PART IS PROBABLY OPTIONAL, so please don't be afraid of the long code blocks. Here is my AppPermissions.js aswell:

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 文档.移除 componentDidMount 中的 checkPermission 并将其添加到 Button 的 onPress 道具中.

You should read more react-native docs. Remove checkPermission in componentDidMount and add this to onPress props of Button.

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'
    }
})

这篇关于在反应中单击按钮时如何提示相机权限?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！