Он предоставляет различные пакеты для создания вкладок, таких как представления в приложении. Так что react-native-tab-view — один из них. Этот компонент реализован с использованием реагировать-native-pager-view, который является еще одним компонентом, который позволяет пользователю проводить пальцем влево или вправо по данным страницы. React-native-tab-view обеспечивает плавную анимацию и жесты, а также имеет прокручиваемые вкладки. Он поддерживает как верхнюю, так и нижнюю панели вкладок.

Монтаж:

npm install react-native-tab-view
После этого нам нужно установить react-native-pager-view для поддержки платформ Android и ios:
npm install react-native-pager-view

Пример:

import * as React from 'react';
import { View, useWindowDimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
const FirstRoute = () => (
<View style={{ flex: 1, backgroundColor: '#ff4081' }} />
); //component for first route
const SecondRoute = () => (
<View style={{ flex: 1, backgroundColor: '#673ab7' }} />
); // component for second route
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});
export default function TabViewExample() {
const layout = useWindowDimensions();
const [index, setIndex] = React.useState(0);
const [routes] = React.useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
return (
<TabView
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={setIndex}
initialLayout={{ width: layout.width }}
/>
);
}

Где
navigationState (обязательно) — это состояние для представления вкладки. Он должен содержать следующие свойства:

  • Индекс используется для представления индекса активного маршрута в массиве маршрутов.
  • Маршрут — это массив, содержащий список объектов маршрута, которые используются для отображения вкладок.

onIndexChange(обязательно) — это функция обратного вызова, которая получает индекс новой вкладки в качестве аргумента при изменении вкладки.
renderScene также является функцией обратного вызова, которая возвращает элемент реакции для отображения в качестве страницы для вкладки. Чтобы узнать больше о реквизите, вы можете перейти по этой ссылке.

Конечный результат будет выглядеть следующим образом:

Webner Solutions — компания по разработке программного обеспечения, специализирующаяся на разработке систем управления страховыми агентствами, систем управления обучением и приложений Salesforce. Свяжитесь с нами по адресу [email protected] для подачи заявок на страхование, электронное обучение и Salesforce.

Первоначально опубликовано на https://blog.webnersolutions.com 6 декабря 2021 г.