LEKCJA 09 - REACT NATIVE (p) - SecureStore, Drawer

ukryj menu

SPEC

aktualizacja: 2021-12-08 14:20:26

1. Drawer navigation

Jest to nawigacja z wysuwanym menu z boku

instalacja modułów w folderze aplikacji

npm install @react-navigation/nativekopiuj

npm install @react-navigation/drawerkopiuj

..\expo install react-native-gesture-handler react-native-reanimatedkopiuj

..\expo install react-native-screens react-native-safe-area-contextkopiuj

całość dzieje się w pliku App.js

import * as React from 'react';
import { Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();kopiuj

a) poniżej prosta nawigacja typu Drawer

DrawerNavigator podobnie jak TabNavigator poprzednio, tworzy menu i nawigację na podstawie nazw ekranów

i nie oferuje możliwości zmieniania zawartości wysuwanego menu

function App() {
    return (
        <NavigationContainer>
            <Drawer.Navigator >
                <Drawer.Screen name="s1" component={S1} />
                <Drawer.Screen name="s2" component={S2} />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}kopiuj

b) tutaj customowa nawigacja - umożliwia konstruowanie własnych komponentów w wysuwanym menu Drawera

import w pliku App.js

import {
    DrawerContentScrollView,
    DrawerItemList,
    DrawerItem
} from '@react-navigation/drawer';kopiuj

w tym wypadku funkcja CustomDrawerContent zwraca zmodyfikowaną zawartość Drawera

gdzie

- DrawerItemList zawiera listę ekranów jak wyżej

- DrawerItem to dowolny element nie powiązany z ekranami apikacji

- Można tez wstawiać do DrawerContentScrollView inną dowolną zawartość: View, Image, Text, własne komponenty

function CustomDrawerContent(props) {
    return (
        <DrawerContentScrollView {...props}>

            <DrawerItemList {...props} />

            <DrawerItem
                label="test"
                icon={() => <Image />}
                onPress={() => console.log("test")}
            />

        </DrawerContentScrollView>
    );
}kopiuj

funkcja użyta jest w prop-ie drawerContent

function App() {
    return (
        <NavigationContainer>
            <Drawer.Navigator drawerContent={(props) => <CustomDrawerContent {...props} />}>
                <Drawer.Screen name="s1" component={S1} />
                <Drawer.Screen name="s2" component={S2} />
            </Drawer.Navigator>
        </NavigationContainer>
    );
}

kopiuj

dokumentacja

https://reactnavigation.org/docs/drawer-based-navigation/

2. SecureStore

SecureStore - sposób na zapis niewielkiej ilości danych w aplikacji

Dane zapisują się w telefonie na trwałe

W Androidzie są izolowane i możliwe do odczytania tylko przez aplikację, która je zapisuje.

Można przechować max 2048 B dla jednej wartości

instalacja w folderze aplikacji

..\expo install expo-secure-storekopiuj

import

import * as SecureStore from 'expo-secure-store';
kopiuj
podstawowe funkcje zawarte w dokumentacji

async saveItem(key, value){
   await SecureStore.setItemAsync(key, value);
}

async getItem(){
   await SecureStore.getItemAsync("key");
}

async deleteItem(key){
    await SecureStore.deleteItemAsync("key");
}kopiuj

Uwaga: w API brakuje funkcji do pobierania wszystkich keys
Zatem trzeba wymyślić własny mechanizm, np zapisujący tablicę keyów

dokumentacja

https://docs.expo.dev/versions/latest/sdk/securestore/

3. TextInput - ekran zapisu notatki

przykład

<TextInput

underlineColorAndroid="#ff0000"

placeholder="TEST"

onChangeText={(text) => console.log(text)}

dokumentacja

https://reactnative.dev/docs/textinput

4. Alert

Klasa Alert z odpowiednimi metodami, a nie prosta funkcja alert()

Umożliwia zmiany w konstrukcji alerta, np dwa buttony obsługiwane osobnymi funkcjami

https://reactnative.dev/docs/alert

5. FlatList

Ilość kolumn zmieniamy propem FlatListy:

numColumns = 2

6. oceniane funkcje aplikacji

- wysuwane menu Drawer

- trwały zapis notatek w SecureStore

- losowy kolor notatki

- usuwanie notatki

- poprawne odświeżanie notatek po dodaniu i usunięciu