Случайный эксперимент: Доступ к камере в React Native
Создайте новый реактивный нативный проект, выполнив команду
npx react-native init myCameraApp
Откройте папку App.js и удалите все.
Основная идея-›
Наше приложение будет состоять из двух компонентов: PendingView (отображается, когда камера не готова) и App Component.
Первым делом создайте файл PendingView.js и добавьте
import React from 'react' import { View,StyleSheet,Text } from 'react-native' const PendingView=()=>{ return( <> <View style={styles.container}> <Text style={{fontSize:30,color:"red"}}> Loading ... </Text> </View> </> ) } export default PendingView; const styles = StyleSheet.create({ container : { flex:1, justifyContent:'center', alignItems:'center' }, })
Теперь идем в android-›app -> build.gradle (не путать с другими файлами)
В cmd запустить-›
npm install react-native-camera
В App.js добавить-›
import React, { useState } from 'react' import {Text, View,StyleSheet, TouchableOpacity,Image, Button, StatusBar} from 'react-native' import {RNCamera} from 'react-native-camera' import PendingView from './PendingView' const App=()=>{ const[image,setImage] = useState(null) const handleButtonClick=async(camera)=>{ const options = {quality:1,base64:true} const data = await camera.takePictureAsync(options) setImage(data.uri) } return( <> <View style={styles.container}> <StatusBar backgroundColor="gray" /> { image?( <View style={styles.container}> <Image style={styles.image} source={{uri:image,width:"100%",height:"80%"}}/> <Text style={styles.profileText} >Welcome</Text> <TouchableOpacity style={styles.buttontap} onPress={()=>setImage(null)} > <Text style={styles.pbuttonText} > Add New Photo </Text> </TouchableOpacity> </View> ):( <RNCamera type={RNCamera.Constants.Type.back} flashMode={RNCamera.Constants.FlashMode.auto} captureAudio={false} androidCameraPermissionOptions={{ title:"Permission to use Camera ", message:"We need to use your camera", buttonPositive:'OK', buttonNegative:"Cancel" }} androidRecordAudioPermissionOptions={{ title:"Permission to use audio ", message:"We need to use your audio", buttonPositive:'OK', buttonNegative:"Cancel" }} style={styles.preview} > { ({camera,status})=>{ if(status!="READY")return<PendingView/> return( <View style={styles.goBottom}> <TouchableOpacity style={styles.button} onPress={()=>handleButtonClick(camera)} > <Text style={styles.clickedText} >Click Photo</Text> </TouchableOpacity> </View> ) } } </RNCamera> ) } </View> </> ) } export default App; const styles = StyleSheet.create({ container:{ flex:1, backgroundColor:"gray" }, preview:{ flex:1, alignItems:'center' }, clickedText:{ color:"white", fontSize:25 }, goBottom:{ flex:1, justifyContent:'flex-end', marginBottom:36 }, button:{ position:'absolute', bottom:0, alignSelf:'center', borderRadius:5, borderWidth:2, borderColor:"green", textAlign:'center', fontSize:10, padding:5 }, image:{ width:300, height:300, alignSelf:'center', borderRadius:300, marginTop:50 }, profileText:{ fontSize:25, fontWeight:'bold', color:"white", textShadowColor:"red", alignSelf:'center', marginTop:15 }, buttontap:{ alignSelf:'center', margin:10, fontSize:15, borderRadius:5, borderColor:"black", borderWidth:2, padding:3 }, pbuttonText:{ color:"white" } })
Теперь запустите конструктор метро.
npx react-native start
Бегать ->
npx react-native run-android (To run the app in android device)
Вывод