引言
@xiaolongshen/react-native-tab-view 是 React Native 下的一个轻量级、易用的选项卡组件库，通过这个组件库，我们可以快速地开发出一个优秀的选项卡界面，提供给用户更友好的交互体验。
安装
切换至项目根目录，执行以下命令在项目中安装该组件：
$ npm install @xiaolongshen/react-native-tab-view --save
用法
基本流程
- 在项目中导入组件库：
import { TabView, SceneMap } from '@xiaolongshen/react-native-tab-view';- 实例化选项卡组件：
<TabView
navigationState={this.state}
renderScene={this.renderScene}
onIndexChange={this.handleIndexChange}
/>其中，navigationState 组件的状态对象，renderScene 是组件渲染方法，handleIndexChange 是回调函数。
- 状态管理：
-- -------------------- ---- -------
----- - -
------ --
------- -
- ---- -------- ------ ------- --
- ---- --------- ------ -------- --
--
--
----------- - ----------
------ -----------
------- ------------
---
----------------- - ----- -- -
--------------- ----- ---
--其中，我们声明了组件的状态进行管理，routes 是指需要渲染的选项卡，我们可以根据自己的需求进行更改。
示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ - -------- -------- - ---- --------------------------------------
-- --------
----- ---------- - -- -- -
----- --------------------- - ---------------- --------- --- -
----- ------------------- ------ ------------
-------
--
----- ----------- - -- -- -
----- --------------------- - ---------------- --------- --- -
----- ------------------- ------- ------------
-------
--
------ ------- ----- --- ------- --------- -
----- - -
------ --
------- -
- ---- -------- ------ ------- --
- ---- --------- ------ -------- --
--
--
----------- - ----------
------ -----------
------- ------------
---
----------------- - ----- -- -
--------------- ----- ---
--
-------- -
------ -
--------
----------------------------
------------------------------
--------------------------------------
---------------- ------ ------------------------------ --
--
--
-
-
----- ------ - -------------------
------ -
----- --
--
----- -
--------- ---
----------- -------
------ -------
--
---结语
通过本文的学习，我们已经可以使用该组件库制作出一个简单的选项卡界面，当然，该组件库还有很多其他需求的场景可以使用，有兴趣的读者可以前往官方文档查看更多使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f72238a385564ab6826