Нижний навигатор с плавающей кнопкой всегда привлекательнее. Плавающая кнопка действия немного отличается от обычной. Плавающие кнопки часто привлекают внимание пользователей, а действия под ними являются приоритетными для разработчиков. Например, в приложении для записи клиентов основным действием будет «назначить встречу», и разработчики часто размещают это действие под плавающей кнопкой в центре нижнего навигатора.
В этой статье мы узнаем, как добавить плавающую кнопку в середине нижней панели навигации в нативном React. Вы можете посмотреть на изображение ниже, чтобы получить представление о том, что мы будем делать в этой статье.
ШАГ 01. Запустите нативный проект React
В этом примере я инициализирую новое нативное приложение React с помощью файла Expo.
npx create-expo-app FloatingButtonApp cd FloatingButtonApp/
ШАГ 02. Установите необходимые пакеты
Нам нужно использовать реактивную навигацию и реагировать на собственные пакеты элементов. Итак, убедитесь, что вы установили эти 2 пакета.
npm install @rneui/themed @rneui/base @react-navigation/bottom-tabs --save
ШАГ 03. Создайте несколько экранов
Я сделал несколько экранов для этого примера; вы можете создать их или использовать свои собственные. Я сделал 5 простых экранов (Контакты, Дом, Назначение, Настройки, Информация о пользователе)
import React from "react";
import { Text, View } from "react-native";
const Contact = () => {
return (
<View>
<Text>This is contact screen</Text>
</View>
);
};
export default Contact;
ШАГ 04. Создайте компонент CustomNavigator
Мы создадим файл компонента CustomNavigator и поместим его в папку components. В этом компоненте мы сначала определяем простой нижний навигатор.
import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "../screens/Home";
import Contact from "../screens/Contact";
import MakeAppointment from "../screens/MakeAppointment";
import Settings from "../screens/Settings";
import UserInfo from "../screens/UserInfo";
const Tab = createBottomTabNavigator();
const CustomNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen component={Home} name="Home"></Tab.Screen>
<Tab.Screen component={Contact} name="Contact"></Tab.Screen>
<Tab.Screen
component={MakeAppointment}
name="Appointment"
></Tab.Screen>
<Tab.Screen component={Settings} name="Settings"></Tab.Screen>
<Tab.Screen component={UserInfo} name="UsersInfo"></Tab.Screen>
</Tab.Navigator>
);
};
export default CustomNavigator;
И вот результат
ШАГ 05. Добавьте значок и цвет для панели навигации
Этот шаг не является обязательным, но мы сделаем что-нибудь, чтобы улучшить внешний вид панели навигации.
Чтобы настроить значки, перейдите по этой ссылке https://reactnativeelements.com/docs/components/icon.
На этом шаге мы добавим некоторые параметры экрана в Tab.Navigator и добавим значок в Tab.Screen, используя его параметр.
С помощью Tab.Navigator нам нужно скрыть метку по умолчанию и добавить для нее стиль. Обратите внимание на важные свойства: положение, отображение, высота.
<Tab.Navigator
screenOptions={{
tabBarShowLabel: false,
tabBarStyle: {
position: "absolute",
bottom: 25,
left: 20,
right: 20,
backgroundColor: "white",
borderRadius: 15,
height: 90,
},
}}
>
<Tab.Screen
component={Home}
name="Home"
options={{
title: "Home",
tabBarLabel: "Home",
tabBarIcon: ({ focused }) => (
<View
style={{
alignItems: "center",
justifyContent: "center",
top: 15,
}}
>
<Icon
name="home"
size="30"
color={focused ? icon_colors.focused : icon_colors.default}
></Icon>
<Text
style={{
color: focused ? icon_colors.focused : icon_colors.default,
}}
>
Home
</Text>
</View>
),
}}
></Tab.Screen>
</Tab.Navigator>
);
};
export default CustomNavigator;
const icon_colors = {
default: "#919191",
focused: "#e0bc02",
};
И результат:
Как видите, с основного экрана я не добавляю текст. Это не ошибка, и мы изменим его на следующем шаге.
ШАГ 06. Создайте компонент плавающей кнопки
Теперь мы создаем новый компонент FloatingButton. Помещаем его в файл CustomNavigator.jsx. Вы можете переместить его в отдельный файл компонента, если хотите.
Потому что я объявляю компонент FloatingButton в одном файле с CustomNavigator и не хочу его нигде повторно использовать, поэтому я только объявляю компонент, не экспортируя его.
Компонент плавающей кнопки:
const FloatingButton = ({ children, onPress }) => {
return (
<TouchableOpacity
onPress={onPress}
style={{
top: -35,
zIndex: 1,
height: 70,
alignItems: "center",
}}
>
<View
style={{
width: 80,
position: "absolute",
height: 80,
borderRadius: 40,
bottom: -5,
backgroundColor: "white",
}}
></View>
<View style={{ width: 70, height: 70 }}>{children}</View>
</TouchableOpacity>
);
};
Измените Tab.Screen, который вы хотите изменить на плавающую кнопку, здесь на экране «Назначение».
<Tab.Screen
component={MakeAppointment}
name="Appointment"
options={{
title: "Appointment",
tabBarLabel: "Appointment",
tabBarIcon: () => (
<Icon
name="calendar-plus-o"
type="font-awesome"
size="30"
color="red"
></Icon>
),
tabBarButton: (props) => <FloatingButton {...props}></FloatingButton>,
}}
></Tab.Screen>
И теперь у нас была нижняя навигация с плавающей кнопкой посередине. Мы можем добавить немного теней, чтобы сделать его более сексуальным.
Создать таблицу стилей для тени
const styles = StyleSheet.create({
shadow: {
shadowColor: "#7F5DF0",
shadowOffset: {
width: 0,
height: 10,
},
shadowOpacity: 0.25,
shadowRadius: 3.5,
elevation: 5,
},
});
Добавьте стиль в Tab.Navigator и TouchableOpacity, обратите внимание в «…styles.shadow»
<Tab.Navigator
screenOptions={{
tabBarShowLabel: false,
tabBarStyle: {
position: "absolute",
bottom: 25,
left: 20,
right: 20,
elevation: 0,
backgroundColor: "white",
borderRadius: 15,
height: 90,
...styles.shadow,
},
}}
<TouchableOpacity
onPress={onPress}
style={{
top: -35,
zIndex: 1,
height: 70,
alignItems: "center",
...styles.shadow,
}}
>
Конечный результат:
Наконец, мы уже закодировали нижний навигатор с плавающей кнопкой.
Я надеюсь, вам понравится и надеюсь, что это поможет!
ССЫЛКИ:
https://github.com/chanh2505/нижний-навигатор-с-плавающей-кнопкой
