LEKCJA 08 - REACT NATIVE (p) - react-navigation, FlatList, Device

ukryj menu

SPEC

aktualizacja: 2021-11-23 10:57:07

1. instalacja aplikacji i modułów

zainstaluj nową aplikację expo (expo init) uruchom blank

aby dało się stworzyć aplikacje wieloekranową, do takiego typu aplikacji trzeba doinstalować nawigację react-navigation

dokumentacja

https://reactnavigation.org/kopiuj

UWAGA: poniższe moduły zainstaluj po kolei w folderze aplikacji, za pomocą CMD:

npm install @react-navigation/nativekopiuj

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

npm install @react-navigation/bottom-tabskopiuj

2. testowa aplikacja z użyciem nawigacji typu Tab

w pliku App.js wstaw tylko:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Screen1 from "./components/Screen1"
import Screen2 from "./components/Screen2"

const Tab = createBottomTabNavigator();

function App() {
return (
        <NavigationContainer>
            <Tab.Navigator>
                <Tab.Screen name="s1" component={Screen1} />
                <Tab.Screen name="s2" component={Screen2} />
            </Tab.Navigator>
        </NavigationContainer>
);
}

export default App;kopiuj

3. opcje wyglądu ekranu

wszystko ustalamy w pliku App dla danego ekranu
możemy pokazać lub ukryć header, zmienić jego kolorystykę

<Tab.Screen
   name="s1"
   component={Screen1}
   options={{
      title: 'title',
      headerStyle: {
         backgroundColor: '#ff0000',
      },
      headerTintColor: '#ffffff',
      headerTitleStyle: {
         fontWeight: 'bold',
      },
}} />kopiuj

więcej w dokumentacji, np ukrycie headera

options={{
...
headerShown: false
...
}}
kopiuj
pokazanie image u w tab-sach:

import Img from "./components/test.png"kopiuj

w Tab.Screen

options={{
      ...
          tabBarIcon: () => (
            <Image source={Img } />
          )
      ...

}}kopiuj

4. FlatList - lista

przykład

<FlatList
          data={
            [
              { key: 'a' },
              { key: 'b' },
              { key: 'c' },
            ]
          }

          renderItem={({ item }) => <Text>{item.key}</Text>}

/>kopiuj

dokumentacja

https://reactnative.dev/docs/flatlistkopiuj

Uwaga: w projekcie item powinien być skonstruowany w osobnym pliku / klasie

problem z key: wstaw do FlatList

keyExtractor={item => item.id.toString()}kopiuj

5. Device - informacje o urządzeniu

w folderze aplikacji instalujemy

..\expo install expo-devicekopiuj

otrzymujemy zestaw informacji o urządzeniu

import * as Device from 'expo-device';kopiuj

informacje wykorzystane w aplikacji:

console.log(Device)kopiuj

Device.brand
Device.deviceName
Device.manufacturer
Device.modelName
Device.getDeviceTypeAsync()
Device.getMaxMemoryAsync()
Device.osName
Device.osVersion
Device.platformApiLevel
Device.totalMemorykopiuj

patrz dokumentacja

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

6. MyButton - prop types - właściwości wymagane w klasie

można zaprojektować klasę tak, aby tworząc jej obiekt, należało podać konkretne props-y ,
bez ich podania będzie błąd

klasa

import PropTypes from 'prop-types';

class AnyClass extends Component{
...
}

AnyClass.propTypes = {
    testProp1: PropTypes.string.isRequired,
    testProp2: PropTypes.bool.isRequired,
    testPress: PropTypes.func.isRequired,
};

export default AnyClasskopiuj

utworzenie obiektu klasy

<AnyClass testProp1="" testProp2={false} testPress={()=>this.anyFunction()} /> kopiuj

Uwaga: powyższy schemat pracy zastosujemy w projekcie do utworzenia klasy MyButton
Uwaga2 - raz przygotowany komponent będzie używany w przyszłych projektach
Uwaga3 - komponent tworzymy z TouchableOpacity i Text, a nie z dostarczanej z RN klasy Button

7. opis aplikacji

- podział na komponenty (patrz skriny):

   HomeScreen - ekran startowy
   DeviceScreen - ekran z listą parametrów urządzenia, użycie FlatList
   MyButton - własna klasa button-a, użycie proptypes
   ListItem - element listy, w osobnym pliku

- używamy nawigacji createBottomTabNavigator
- można zobaczyć listę wyżej wymienionych (punkt 5) parametrów urządzenia
- można usunąć parametr z listy (ekran pokazuje bieżącą listę)

- można przywrócić wszystkie parametry (refresh)
- używamy własnej klasy MyButton, a nie natywnej Button