В современном дизайне мобильных приложений нижняя панель навигации стала популярным выбором для перехода между различными разделами или представлениями приложения. Этот интуитивно понятный и удобный компонент пользовательского интерфейса позволяет пользователям легко переключаться между экранами одним касанием. В этой статье мы рассмотрим несколько методов реализации нижней панели навигации с просмотром страницы, используя разговорный язык и предоставив примеры кода для разных платформ.

1. Flutter:
   Flutter — это мощная кроссплатформенная платформа для разработки мобильных приложений, предлагающая несколько вариантов реализации нижней панели навигации с просмотром страницы. Один из популярных подходов — использование виджета BottomNavigationBarв сочетании с виджетом PageView.

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  final List<Widget> _pages = [
    Page1(),
    Page2(),
    Page3(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: PageView(
        children: _pages,
        onPageChanged: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }
}

2. React Native:
   Если вы используете React Native для разработки мобильных приложений, вы можете создать аналогичную нижнюю панель навигации с функциональностью просмотра страниц, используя такие библиотеки, как react-navigationили react-native-navigation.

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
const Tab = createBottomTabNavigator();
const HomeScreen = () => (
  <View style={styles.container}>
    <Text>Home Screen</Text>
  </View>
);
const SearchScreen = () => (
  <View style={styles.container}>
    <Text>Search Screen</Text>
  </View>
);
const SettingsScreen = () => (
  <View style={styles.container}>
    <Text>Settings Screen</Text>
  </View>
);
const App = () => {
  const [currentTab, setCurrentTab] = useState('Home');
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="Home"
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused }) => {
            let iconName;
            if (route.name === 'Home') {
              iconName = focused ? 'home' : 'home-outline';
            } else if (route.name === 'Search') {
              iconName = focused ? 'search' : 'search-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'settings' : 'settings-outline';
            }
            return <Icon name={iconName} size={24} color="black" />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'blue',
          inactiveTintColor: 'gray',
        }}
        onTabPress={({ route }) => setCurrentTab(route.name)}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Search" component={SearchScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
export default App;

Реализация нижней панели навигации с просмотром страницы — отличный способ улучшить взаимодействие с пользователем в ваших мобильных приложениях. В этой статье были рассмотрены две популярные платформы — Flutter и React Native, и приведены примеры кода для каждой. Следуя этим методам, вы сможете создать для своих пользователей удобную и интуитивно понятную навигацию.