ЗАНЯТИЕ №4-5

Жизненный цикл
мобильного приложения
FlatList

Компонент, позволяющий создавать повторяющиеся элементы. Можно

использовать как замену перебору с помощью map.
props:
●data - массив с набором данных. Все данные уйдут в props повторяющегося
компонента
●renderItem - ссылка на функцию или класс компонента, который будет повторяться
●keyExtractor - функция с набором параметров как в map, которая будет возвращать
значение key для каждого из повторяющихся компонентов. По умолчанию key
будет равен index
●ItemSeparatorComponent - вставляется между повторяющимися элементами
Дополнительно: https://reactnative.dev/docs/flatlist
function App() {
let [text, setText] = useState("");
return (
<View style={styles.container}>
<FlatList
data={[1, 2, 3, 4]}
renderItem={Item}
keyExtractor={(item, index)=>index}
/>
</View>
);
}
function Item(props){
return (
<View>
<Text>{props.item}</Text>
</View>
)
}
SectionList

Работает схожим образом, как и компонент FlatList, однако поддерживает вложенные

списки.
props:
●sections - массив из объектов, представляющих собой секции. Объект обязательно
должен иметь свойство data
●renderSectionHeader, renderSectionFooter - компонент, который должен будет
отрисоваться в конце и начале каждой секции. props, который приходит в
компонент - объект со свойством section, которое хранит всю информацию о
секции
function App() {
return (
<View style={styles.container}>
<SectionList
sections={data}
renderItem={Item}
renderSectionHeader={
({section})=><View><Text>{section.title}</Text></View>
}
/>
</View>
);
}
function Item(props){
return (
<View>
<Text>{props.item}</Text>
</View>
)
}
Перепишем ToDoList с помощью
SectionList
Навигация по экранам
Навигация по экранам - это аналог маршрутизации. Смысл будет схож: в
зависимости от выбранных действий пользователя отображать один из экранов.
В мобильных приложениях очень часто происходит смена экранов.
Для правильной работы навигации нужно подключить следующие библиотеки:
●@react-navigation/native
●@react-navigation/native-stack
●react-native-screens
●react-native-safe-area-context
Примечание: при работе в песочнице, нужные библиотеки подключаются в нижнем
левом углу рабочей области.
Настройка навигации
import { NavigationContainer } from '@react-
navigation/native';
Во-первых, всё приложение должно быть
import { createNativeStackNavigator } from '@react-
обёрнуто в компонент
navigation/native-stack';
NavigationContainer.
Также нужно создать стек (Stack) - const Stack = createNativeStackNavigator();
объект, помогающий управлять всей
навигацией. Стек создаётся с помощью
function App() {
функции createNativeStackNavigator из
return (
библиотеки навигации.
<NavigationContainer>
<Stack.Navigator>

</Stack.Navigator>
</NavigationContainer>
);
}
Настройка навигации <Stack.Navigator>
<Stack.Screen

Все компоненты навигации будут внутри name="home"

компонента Stack.Navigator.
Stack.Screen будет символизировать component={(props)=><View>...</View>

экран. }

Stack.Screen имеет обязательные props: />

●component - компонент, который нужно <Stack.Screen

name="second"
отрисовать
●name - уникальное имя экрана component={()=><View>...</View>
}
/>
</Stack.Navigator>
Настройка навигации
Чтобы перейти на определенный экран, <Button onPress={()=>{
нужно вызвать функцию navigate в
объекте navigation, который будет
передан через props. props.navigation.navigate("second")

Параметром данной функции будет имя }}>Go</Button>

экрана.
Вторым параметром можно передать
дополнительные данные, которые можно
будет получить через props.route.params
Задание

Сделаем приложение для просмотра контактов.

Конец