LEKCJA 19 - REACT NATIVE (p) - camera settings, animations

ukryj menu

SPEC

aktualizacja: 2022-02-18 09:13:13

0. film na YT

https://youtu.be/VbUwHdUpQ-kkopiuj

1. animacja pozycji View - gotowy przykład animacji pozycji y, do wykorzystania w projekcie

przykład jest z użyciem klasy, trzeba przerobić na komponent funkcyjny

import { Animated } from "react-native";

class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pos: new Animated.Value(500), //startowa pozycja y wysuwanego View
        };
        this.isHidden = true
        console.log(this.state.pos)
    }

    toggle() {

        if (this.isHidden) toPos = 0; else toPos = 500

        //animacja

        Animated.spring(
            this.state.pos,
            {
                toValue: toPos,
                velocity: 1,
                tension: 0,
                friction: 10,
                useNativeDriver:true
            }
        ).start();

        this.isHidden = !this.isHidden;
    }

    render() {
        return (
            <View style={{ flex: 1 }}>

                <Animated.View
                    style={[
                        styles.animatedView,
                        {
                            transform: [
                                { translateY: this.state.pos }
                            ]
                        }]} >
                    <Text>ANIMATE ME!</Text>

                </Animated.View>

                <Button title="start" style={styles.button} onPress={() => { this.toggle() }} />

            </View>
        );
    }
}

var styles = StyleSheet.create({

    animatedView: {
        position: "absolute",
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: "#00ff00",
        height: 500,
    }
});

export default Test
kopiuj

inne rodzaje animacji - dokumentacja:

https://reactnative.dev/docs/animationskopiuj

2. własny komponent RadioGroup

założenia

- nie korzystamy z żadnych gotowych rozwiązań komponentów

- wykonanie z dwu własnych komponentów :

--- RadioButton - złożony z dwu okrągłych View, renderowanych warunkowo w zależności od kliknięcia
--- RadioGroup - renderujący odpowiednią ilość Radiobuttonów zależną od długości przesłanej do RadioGroup tablicy
- zawsze tylko jeden z RadioButton jest zaznaczony, pozostałe odznaczone

przykład wywołania, tak mniej więcej powinna wyglądać jedna "sekcja" w obrębie animowanego panelu w kamerze

<RadioGroup
    color="#..."
    change={this.change}
    direction="column/row"
    data={[1, 2, 3, 4]}
    groupName="RADIOGROUP TITLE" />kopiuj

Uwaga: nie korzystamy z żadnych gotowych rozwiązań, tylko wykonujemy ten komponent "od zera"

3. camera params - pobieranie danych kamery z urządzenia

Gdzie i jak wstawić startowe parametry kamery, które potem zmieniamy za pomocą naszych RadioButonów?

Zwracamy uwagę na zdarzenie onCameraReady

W obrębie funkcji wykonującej się po zajściu tego zdarzenia należy pobierać odpowiednie parametry kamery naszego urządzenia

<Camera
    ...

    onCameraReady={() => console.log("camera ready")}
    ratio={this.state.ratio}
    whiteBalance={this.state.wb}
    pictureSize={this.state.ps}
    flashMode={this.state.fm}

    ...
>
</Camera >kopiuj

pobranie stałych wartości white balance:

console.log(Camera.Constants.WhiteBalance)kopiuj

pobranie stałych wartości flash mode

console.log(Camera.Constants.FlashMode)kopiuj

ratios - pobieranie z urządzenia różnie działa, na początek można wstawić na stałe do state

ratios: ["4:3", "16:9"];kopiuj

https://docs.expo.dev/versions/latest/sdk/camera/#getsupportedratiosasynckopiuj

picture sizes - pobranie możliwych wielkości zdjęć z urządzenia

getSizes = async () => {
    if (this.camera) {
        const sizes = await this.camera.getAvailablePictureSizesAsync(ratio)
        alert(JSON.stringify(sizes, null, 4))
    }
};kopiuj

4. składniki tej części aplikacji

pracujemy w obrębie ekranu kamery oraz dużego zdjęcia, pozostałe ekrany bez zmian

- animowane, skrolowane View w kamerze (można użyć komponentu ScrollView)
- poprawnie zbudowany i działający komponent RadioGroup renderujący Radiobuttony, jak na skrinie
- załadowane i działające ustawienia kamery: balans bieli, wielkość zdjęcia, ratio kamery
- wielkość wykonanego zdjęcia widoczna na ekranie BigPhoto (width x height)

- zmiana proporcji widoku kamery po zmianie ratio kamery