LEKCJA 06 - REACT NATIVE (p) - layout

ukryj menu

SPEC

aktualizacja: 2021-10-12 10:29:31

1. instalacja aplikacji React Native w wersji quick app z klientem Expo

taka aplikacja nie generuje pliku APK do instalacji
tylko uruchamia się z pomocą klienta Expo zainstalowanym na telefonie

jeśli klienta Expo nie ma na tablecie, zainstaluj/zaktualizuj go ze sklepu Play (ma być wersja 2.17.4 lub nowsza)

UWAGA:zalecam używać cmd, zamiast terminala lub powershella

a) instalacja na pracowni (konto z ograniczonymi uprawnieniami)

- ustaw chrome jako domyślną przeglądarkę (uruchomi się w niej konsola aplikacji)
- utwórz na pulpicie folder na aplikację (nazwa nie powinna zawierać przecinka)
- otwórz katalog %AppData% i usuń wszystko z katalogu npm jeśli taki jest
- w folderze na pulpicie uruchom z konsoli polecenie: npm install expo-cli -g
- po zakończeniu spakuj RAR-EM zawartość katalogu npm
- skopiuj i rozpakuj rar-a do swojego katalogu na pulpicie
- w folderze na pulpicie uruchom z konsoli polecenie: expo init testapp001
- wybierz blank i podaj nazwę aplikacji
- po zakończeniu pobierania uruchom polecenie expo start ./testapp001

startuje serwer, który pakuje i hostuje aplikację, która wyświetlana jest na telefonie z użyciem klienta Expo

Uwaga1: przed uruchomieniem wyczyść pamięć aplikacji Expo na tablecie (aby nie włączały się poprzednie aplikacje)

Uwaga2: przed uruchomieniem wyłącz opcję File/autosave w VSCode

Uwaga3: wyłącz zaporę Ustawienia / Zapora Windows Defender / Włącz lub wyłącz zaporę (egzamin/egzamin)

uruchom klienta Expo na tablecie
zeskanuj kod QR z Chrome
poczekaj na pierwsze dłuższe spakowanie aplikacji, kolejne będą już szybkie (hot reloading)

b) instalacja aplikacji na koncie administracyjnym

- ustaw chrome jako domyślną przeglądarkę
- npm install expo-cli -g
- potem expo init testapp001
- potem npm start ./testapp001 (obecnie expo start ./testapp001)

3. instalacja dodatku react-native-snippet

dodatek pomagający m in w tworzeniu plików jak poprzednio

https://marketplace.visualstudio.com/items?itemName=jundat95.react-native-snippetkopiuj

zobacz opis działania i skróty np: rnc

PROSZĘ O TWORZENIE KLAS Z POMOCĄ TEGO DODATKU, A NIE KOPIOWANIE ISTNIEJĄCYCH

4. plik startowy aplikacji

informacja o tym który to plik mieści się w pliku package.json

node_modules/expo/AppEntry.jskopiuj

5. podstawowe wbudowane komponenty RN do dzisiejszej pracy

<View /> - kontener na inne (odpowiednik DIV-a)
<Text /> - zawartość tekstowa (nie można pisać tekstu poza komponentem Text)
<TouchableOpacity /> - kontener wrapujący klikalne elementy (może zawierać dowolną strukturę wewnątrz)kopiuj

potrzebne na dzisiaj docs

https://reactnative.dev/docs/flexbox
https://reactnative.dev/docs/view
https://reactnative.dev/docs/touchableopacitykopiuj

6. style - flex

https://reactnative.dev/docs/stylekopiuj

do pracy z dzisiejszymi ćwiczeniami zapoznaj się z takimi stylami:

https://reactnative.dev/docs/layout-propskopiuj

flex
flexDirection
justifyContent
alignSelf
alignContentkopiuj

7. podział aplikacji na pliki - skrin 01

po zainstalowaniu dodatku (pkt 2) komenda rnce w pustym pliku tworzy klasę RN

poniżej przykładowa zawartość komponentów dla najprostszej aplikacji -> skrin 01
zawierającej header, content, footer w folderze /components

plik App.js

import React from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';

import Header from "./components/Header"
import Content from "./components/Content"
import Footer from "./components/Footer"

export default class App extends React.Component {
render() {
    console.log("App") // tą konsolę zobacz w przeglądarce
    return (
      <View style={styles.container}>
        <Header />
        <Content />
        <Footer />
      </View>
    );
}
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#ffff00',
},

});kopiuj

pliki Header.js, Content.js, Footer.js

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

class Header extends Component {
constructor(props) {
    super(props);
    this.state = {
    };
    console.log("Header")
}

render() {
    return (
      <View style={{flex:1,backgroundColor:"#FF0000"}}>
        <Text style={styles.text}> Header </Text>
      </View>
    );
}
}

const styles = StyleSheet.create({
text: { fontSize: 48, }
});

export default Header;
kopiuj

Uwaga: w konsoli aplikacji ReactNative w Chrome zobacz czy występuje dwa razy console.log()

8. ćwiczenia z layoutem widoczne na kolejnych skrinach

wykonaj wszystkie poniższe ćwiczenia, przeczytaj dokładnie opis danego ćwiczenia:

skrin 02 - aplikacja zawiera komponenty: App, Item; kolory, napisy i wielkości są przekazywane w props do Item

skrin 03 - aplikacja zawiera komponenty: App, Item; dane kolorystyczne są w jednej tablicy, jedno główne View, Itemy utwórz z pomocą map

skrin 04 - aplikacja zawiera komponenty: App, Item; dane kolorystyczne są w jednej tablicy, dwa podrzędne View, flex reverse dla prawej kolumny aplikacji

skrin 05 - aplikacja zawiera komponenty: App, Item; dane kolorystyczne są w jednej tablicy, dwa kolory fonta

skrin 06 - aplikacja zawiera komponenty: App, Item; pętla w pętli (jedna tworzy pionowe Views, druga Itemy w nich)

skrin 07 - aplikacja zawiera komponenty: App, Item2; pojawia się klikalny komponent TouchableOpacity, kliknięcie wyświetla kolor tła i numer elementu

9. Zadanie

przydzielam indywidualnie po skończeniu poprzednich

10. dokumentacja ReactNative

https://reactnative.dev/kopiuj