在 React Native 中，ScrollView 组件可以用来滚动显示多个组件，但是默认情况下它的滚动方向是从上到下。如果我们需要一个从下到上的滚动列表，可以使用 @cutii/react-native-invertible-scroll-view 这个 npm 包。本文将详细介绍如何使用 @cutii/react-native-invertible-scroll-view 组件。
安装
要使用 @cutii/react-native-invertible-scroll-view，需要先安装它。可以使用 npm 或者 yarn 安装。
使用 npm 安装：
npm install @cutii/react-native-invertible-scroll-view
使用 yarn 安装：
yarn add @cutii/react-native-invertible-scroll-view
使用
@cutii/react-native-invertible-scroll-view 的使用方法和 ScrollView 组件类似，只是需要引入这个组件，同时将 horizontal 和 inverted 两个属性设置成 true。
下面是一个简单的示例，它展示了如何使用 @cutii/react-native-invertible-scroll-view 显示一组文本。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ---- - ---- ---------------
------ -------------------- ---- ---------------------------------------------
----- ------- - -- -- -
------ -
--------------------- ----------------- ----------------
----- --------------------
----- ----- ----- --- ----- ----------- ---------- ----- --- ------- -
----- -- -------- ------ ---- ------- ----------- -- ----- ----
---------- -------- ------- -- --- --------- ------ --------- -------
-- --- ---- ----- ------- ------------ ------ ---- ----- --- ----
----- --- ---- ----------- ----------
-------
----- --------------------
----- ------ --- ----- -- ---------- ----- -- ---- --- ----- --------
----------- --- -- ------ ----- --- ---- ------ --------- ---------
----- -- ------- --------- -- ------ ------ -- ------ ---------- ----
--- ---- --- -------- ------- ----- ------ ------- -----
-------
-----------------------
--
--
----- ------ - -------------------
----- -
--------- ---
-------- ---
--
---
------ ------- --------属性
@cutii/react-native-invertible-scroll-view 组件支持 ScrollView 的所有属性，另外还有两个属性：
| 属性 | 类型 | 描述 |
|---|---|---|
horizontal |
boolean | 是否横向滚动（默认为 false） |
inverted |
boolean | 是否从下往上滚动（默认为 false） |
可能遇到的问题
如果遇到以下问题，可以尝试按照下面的方法解决。
在 iOS 上无法滚动
在 iOS 上无法滚动可能是因为你设置了 CSS 属性 overflow: hidden，可以通过删除这个属性解决此问题。
在 Android 上反转方向失败
在 Android 上可能需要将 inverted 属性设置为 false。
总结
@cutii/react-native-invertible-scroll-view 可以很方便地实现从下往上的滚动列表，本文介绍了该组件的安装和使用方法，以及可能遇到的问题。希望本文能对你使用这个组件有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005681d81e8991b448e43e7