В React Native для создания навигации с боковым меню можно использовать библиотеки, такие как React Navigation или React Native Navigation. Ниже приведен пример использования React Navigation для реализации навигации с боковым меню (Drawer Navigation) и отлова события нажатия на элементы меню.
1. Установите React Navigation:
npm install @react-navigation/native
2. Подключите необходимые зависимости:
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
3. Установите React Navigation Drawer:
npm install @react-navigation/drawer
4. Импортируйте необходимые компоненты и функции:
import { createDrawerNavigator } from '@react-navigation/drawer'; import { NavigationContainer } from '@react-navigation/native'; import { View, Text } from 'react-native';
5. Создайте компоненты для экранов приложения:
function Screen1({ navigation }) { const onPressMenu = () => { // Обработка нажатия элемента меню }; return ( <View> <Text onPress={onPressMenu}>Screen 1</Text> </View> ); } function Screen2({ navigation }) { const onPressMenu = () => { // Обработка нажатия элемента меню }; return ( <View> <Text onPress={onPressMenu}>Screen 2</Text> </View> ); }
6. Создайте навигацию с боковым меню:
const Drawer = createDrawerNavigator(); function App() { return ( <NavigationContainer> <Drawer.Navigator> <Drawer.Screen name="Screen 1" component={Screen1} /> <Drawer.Screen name="Screen 2" component={Screen2} /> </Drawer.Navigator> </NavigationContainer> ); } export default App;
В приведенном примере экраны "Screen1" и "Screen2" содержат текстовые элементы, которые обрабатывают событие onPress для отлова нажатия на элементы меню.
В функции обработчика onPress кнопки меню, вы можете выполнить необходимые действия в зависимости от нажатого элемента меню. Например, открыть другой экран с помощью функции навигации или изменить текущий контекст приложения.
Вышеописанный пример является только базовым и может быть доработан и настроен в соответствии с конкретными требованиями вашего приложения.