ukryj menu
SPEC
aktualizacja: 2021-12-10 10:15:36
1. menu drawera
dodajemy kolejny ekran do edycji notatki, jednak nie powinien on być widoczny w menu drawera
zastępujemy więc domyślną nawigację, nawigacją customową
<DrawerItem
label="label"
icon={() => <Image />}
onPress={() => props.navigation.navigate("ekran_edycji")}
/>kopiuj
label="label"
icon={() => <Image />}
onPress={() => props.navigation.navigate("ekran_edycji")}
/>kopiuj
2. Dodawanie kategorii - Picker
biblioteka z dokumentacji expo, lekko przerobiona do użytku wewnątrz klasy ekranu
expo install @react-native-picker/pickerkopiuj
import
import { Picker } from '@react-native-picker/picker';kopiuj
przykład statycznego dodania kategorii:
<Picker
selectedValue={this.state.cat}
onValueChange={this.changeCat}>
<Picker.Item label="AAA" value="a" />
<Picker.Item label="BBB" value="b" />
<Picker.Item label="CCC" value="c" />
</Picker>kopiuj
selectedValue={this.state.cat}
onValueChange={this.changeCat}>
<Picker.Item label="AAA" value="a" />
<Picker.Item label="BBB" value="b" />
<Picker.Item label="CCC" value="c" />
</Picker>kopiuj
gdzie:
prop selectedValue wskazuje która wartość mam być zaznaczona
prop onValueChanged wywołuje funkcję która wykonuje się przy zmianie wartości w pickerze
dokumentacja
https://docs.expo.dev/versions/latest/sdk/picker/
3. odświeżanie danych podczas nawigacji
cel: odświeżenie zawartości ekranu podczas powrotu do niego
wobec faktu że nie wywołuje się wtedy componentDidMount
w konstruktorze dodajemy funkcję
this.funkcja = nullkopiuj
w componentDidMount zaczynamy nasłuchiwać na zdarzenie focus występujące podczas nawigacji
componentDidMount = () => {
this.funkcja = this.props.navigation.addListener('focus', () => {
// ta funkcja wykona się za kazdym razem kiedy ekran zostanie przywrócony
this.refresh()
});
// ta funkcja wykona się raz podczas uruchomienia ekranu
this.refresh()
}
componentWillUnmount() {
this.funkcja();
}kopiuj
this.funkcja = this.props.navigation.addListener('focus', () => {
// ta funkcja wykona się za kazdym razem kiedy ekran zostanie przywrócony
this.refresh()
});
// ta funkcja wykona się raz podczas uruchomienia ekranu
this.refresh()
}
componentWillUnmount() {
this.funkcja();
}kopiuj
4. przekazywanie danych pomiędzy ekranami
można przejść do kolejnego ekranu
this.props.navigation.navigate('ekran')kopiuj
można przejść i przekazać dane w postaci obiektu
this.props.navigation.navigate('ekran', { aaa: 1, bbb: 2 })kopiuj
odczyt danych w drugim ekranie, np w render()
console.log(this.props.route.params.aaa, this.props.route.params.bbb)kopiuj
5. TextInput i jego właściwości w ekranie edycji
najlepiej podawać przekazanego prop-a z tekstem, który ma się wyświetlić w TextInput, do właściwości defaultValue
a zmieniającego się state do właściwości value
Uwaga: value powinno się zapisywać na bieżąco w state
<TextInput
defaultValue={prop_na_wejscie}
value={state_przy_zmianie}
onChangeText={(text) => this.setState({ ... })}
multiline={true} />kopiuj
defaultValue={prop_na_wejscie}
value={state_przy_zmianie}
onChangeText={(text) => this.setState({ ... })}
multiline={true} />kopiuj
6. wyszukiwarka notatek
użyj metody filter na tablicy notatek
wyszukujemy równocześnie w: tytule, treści i kategorii
7. Oceniane składniki drugiej części aplikacji - 3pkt
- możliwość dodania kategorii notatki (drawer)
- podczas dodawania notatki - wybór kategorii (picker)
- edycja/podgląd całości notatki na kolejnym ekranie - zmiana kategorii (picker)
- wyszukanie notatki (tytuł, treść, kategoria) na ekranie głównym (input)
- widoczna kategoria w notatce
8. Trzecia część aplikacji - 1pkt
w lekcji 11