LEKCJA 07 - REACT NATIVE (p) - calcOrientApp

LEKCJA 07 - REACT NATIVE (p) - calcOrientApp
ukryj menu
SPEC
aktualizacja: 2021-10-19 10:11:56

1. projekt CalculatorApp - baza 3 pkt

- za w pełni działający, ostylowany, wyglądający i działający podobnie jak oryginalny kalkulator Android-a
- podział na komponenty - App, Item
- funkcjonalności:  + - / * . sin, cos, sqrt, pow, del, c (patrz skriny)
- zaimplementowane różne layouty dla obu orientacji
- dopasowanie do dowolnej wielkości ekranu urządzenia (komórka, tablet)

ocena w wyznaczonym terminie

2. zmiana orientacji ekranu

w pliku app.json usuń

"orientation": "portrait"kopiuj

uruchom serwer i przebuduj aplikację


import do sprawdzenia wymiarów urządzenia

import { Dimensions } from 'react-native';kopiuj

wykrycie szerokości / wysokości urządzenia

isPortrait = () => {
   let dim = Dimensions.get('screen');
   return dim.height >= dim.width;
};kopiuj

event na wykrycie zmiany orientacji


Dimensions.addEventListener("change", () => {
   this.setState({
      orientation: this.isPortrait()
   })
})

render zależny od orientacji

render() {
    if (this.state.orientation) {
      return (
          //portrait
       );
    }
    else {
      return (
        //landscape
      );
    }

}kopiuj