在 React Native 的开发中，侧边栏列表是很常见的 UI 元素。为此，我们可以使用 react-native-sidebar-listview 这个 npm 包来帮助我们快速搭建一个侧边栏列表。本篇文章将介绍这个 npm 包的用法，以及如何通过它来构建一个简单的侧边栏列表。
安装和配置 react-native-sidebar-listview
首先，在 React Native 项目的根目录下执行如下命令来安装 react-native-sidebar-listview：
npm install react-native-sidebar-listview --save
在使用该模块之前，我们还需要对 react-native 提供的 Scrollview 进行一些配置。在 index.ios.js 或 index.android.js 中修改 ScrollView 的方向以及垂直滚动条的显示设置，代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -
------------
-----------
----------
- ---- ---------------
----- ----- ------- --------- -
-------- -
------ -
-----------
----------------------------
------------------------------------
-
- -- ---- ---
-------------
--
-
-
-------------------------------------- -- -- -------使用 react-native-sidebar-listview
安装和配置完毕后，我们可以 import 这个包到我们的代码中使用了。react-native-sidebar-listview 需要我们在自定义的组件中引入 Sidebar 和 SidebarItem 两个组件，代码如下：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -
------------
-----------
-----
----
- ---- ---------------
------ - -------- ----------- - ---- --------------------------------
----- --- ------- --------- -
------------------ -
-------------
---------- - -
----------- - -- --- -- --
--
-
-------- -
------ -
--------
----------------------------------
------------------ -- -
------ -
------------
----------- -- - -- ------ -- --
----------------
--
--
--
-
- -- ----- -- -
----------
--
-
-
-------------------------------------- -- -- -------在上面的代码中，我们首先使用 Sidebar 组件来包裹我们应用主内容，它会自动在应用主内容左侧绘制出完整的侧边栏列表。然后我们使用 SidebarItem 组件来构建列表项，通过传递 dataSource 和 renderItem 属性来渲染列表数据。onPress 方法则是为列表项添加点击事件。
示例代码
下面的代码中，我们构建了一个简单的侧边栏列表，用于展示一组景点的介绍信息：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -
------------
-----------
-----
----
- ---- ---------------
------ - -------- ----------- - ---- --------------------------------
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
---------------- -------
--
---
------ ------- ----- ----- ------- --------- -
------------------ -
-------------
---------- - -
----------- -
- ---- -- ----- ---- --
- ---- -- ----- ----- --
- ---- -- ----- ---- --
- ---- -- ----- ----- --
- ---- -- ----- ------ --
--
--
-
-------- -
------ -
--------
----------------------------------
------------------ -- -
------------
----------- -- - ------------- -------- ---- --------------- --
----------------
--
--
-
----- -------------------------
---------------
--------------------------
-------
----------
--
-
-
-------------------------------------- -- -- -------总结
通过本文的介绍，我相信你已经对 react-native-sidebar-listview 有了一个初步的理解。react-native-sidebar-listview 可以非常便捷地构建出一个带有侧边栏的列表页面，让你的应用拥有更好更丰富的用户界面交互体验。祝您在 React Native 的开发中越来越顺手！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056f9d81e8991b448e7ae6