一. 简介
React-Native-Tab-View 是一种用于构建基于 React Native 的选项卡导航的组件。它由 React Native 社区维护,具有质量和功能上的稳定性。
主要功能包括:
1)多种标签效果:可实现 TabBar 标签居上、居下、居左、居右,支持高度自由定制导航栏。
2)多种页面布局:可实现 渐变、动画、翻转 等多种页面切换效果,支持自己实现间隔器、拖拽效果等扩展。
3)适用于多平台:React Native-Tab-View 不仅可以运用在 Android 平台上,还可以运用在 iOS 和 Web 平台上。
二. 安装
使用 React-Native-Tab-View 对项目进行安装,请进行以下操作:
{`
npm install react-native-tab-view
// or
yarn add react-native-tab-view
`}
三. 基本用法
功能本质的组件必然会衍生出各种不一样的需求,因此,官方提供了各种常用结构封装,同时也提供了很强的自定义性,下面是本篇文章的代码示例。建议在真机测试,以获取更好的效果。
1)标签居上
打开 App.js 文件,采用标签导航居上的方式实现页面跳转。
{`
import React, { useState } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import { SceneMap, TabView } from 'react-native-tab-view';
const FirstRoute = () => (
);
const SecondRoute = () => (
);
const renderScene = SceneMap({
first: FirstRoute,
second: SecondRoute,
});
const App = () => {
const [index, setIndex] = useState(0);
const [routes] = useState([
{ key: 'first', title: 'First' },
{ key: 'second', title: 'Second' },
]);
const renderTabBar = (props) => (
);
return (
);
};
export default App;
`}
2)标签居下
以上代码示例中的标签是居上的,接下来我们将采用标签居下的方式实现页面跳转。
{`
...
import { BottomTabBar, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
export default function App() {
return (
,
}}
/>
,
}}
/>
);
}
`}
3)标签居左
以下代码演示了标签居左的功能示例。
{`
...
import { RectButton } from 'react-native-gesture-handler';
const renderLabel = ({ route, focused, color }) => {
return (
{route.title}
);
};
const renderTabBarItem = ({ route, focused }) => {
const icon = `ios-${route.key}`;
return (
{route.title}
);
};
const renderTabBar = (props) => {
return (
);
};
export default function App() {
const [index, setIndex] = useState(0);
const [routes] = useState([
{ key: 'home', title: 'Home' },
{ key: 'cart', title: 'Cart' },
{ key: 'order', title: 'Order' },
{ key: 'profile', title: 'Profile' },
]);
const renderScene = SceneMap({
home: HomeScene,
cart: CartScene,
order: OrderScene,
profile: ProfileScene,
});
return (
);
}
`}
四. 总结
React-Native-Tab-View 是构建基于 React Native 的选项卡导航的组件。本篇文章提供了三种不同的实现方式,您可以选择适合您项目的方式进行使用。