LEKCJA 13 - REACT NATIVE (p) - camera /updated 17.12/

ukryj menu

import

import { Camera } from "expo-camera";kopiuj

konstruktor

constructor(props) {
    super(props);
    this.state = {
        hasCameraPermission: null,         // przydzielone uprawnienia do używania kamery
        type: Camera.Constants.Type.back,  // typ kamery
    };
}kopiuj

uprawnienia przydzielamy w funkcji componentDidMount()

let { status } = await Camera.requestCameraPermissionsAsync();
this.setState({ hasCameraPermission: status == 'granted' });kopiuj

kamera - renderowanie warunkowe w zależności od przydzielonych lub nie, uprawnień

render() {
    const { hasCameraPermission } = this.state; // podstawienie zmiennej ze state
    if (hasCameraPermission == null) {
        return <View />;
    } else if (hasCameraPermission == false) {
        return <Text>brak dostępu do kamery</Text>;
    } else {
        return (
            <View style={{ flex: 1 }}>
                <Camera
                    ref={ref => {
                        this.camera = ref; // Uwaga: referencja do kamery używana później
                    }}
                    style={{ flex: 1 }}
                    type={this.state.type}>
                    <View style={{ flex: 1 }}>
                        {/* tutaj wstaw buttony do obsługi kamery widoczne na skrinach */}
                    </View>
                </Camera>
            </View>
        );
    }
}
kopiuj
zmiana typu kamery - back/front - okrągły button

this.setState({
    type: this.state.type === Camera.Constants.Type.back
        ? Camera.Constants.Type.front
        : Camera.Constants.Type.back,
});kopiuj

wykonanie zdjęcia - zaprojektuj okrągły button

zdjęcie można robić pod warunkiem, że kamera jest dostępna, np nie jest zajęta przez inną aplikację w urządzeniu

if (this.camera) {
    let foto = await this.camera.takePictureAsync();
    let asset = await MediaLibrary.createAssetAsync(foto.uri); // domyślnie zapisuje w folderze DCIM
    alert(JSON.stringify(asset, null, 4))
}kopiuj

2. BackHandler

w razie potrzeby możemy obsłużyć zdarzenie naciśnięcia butona back na telefonie

import { BackHandler } from "react-native"kopiuj

w componentDidMount() dodanie listenera

BackHandler.addEventListener("hardwareBackPress", this.handleBackPress);kopiuj

w componentWillUnmount() usunięcie listenera

BackHandler.removeEventListener("hardwareBackPress", this.handleBackPress);kopiuj

własna funkcja obsługująca button back

handleBackPress = () => {
    //tutaj wywołanie funkcji odświeżającej gallery, przekazanej w props-ach
    //...
    //powrót do ekranu poprzedniego
    this.props.navigation.goBack()
    return true;
}kopiuj

dokumentacja

https://docs.expo.io/versions/latest/sdk/camera/
https://reactnative.dev/docs/backhandler