React Native 是一种流行的移动端应用程序开发框架，它允许开发人员使用 JavaScript 和 React 来构建原生应用程序。在 React Native 应用程序中，您可以使用滚动视图来显示大量的内容，其中包括水平滚动视图。在本文中，我们将介绍如何在 React Native 应用程序中创建水平滚动视图。
安装 React Native
首先，如果您尚未安装 React Native，请按照官方文档的指示安装相关的开发环境。
创建水平滚动视图
在 React Native 中，要创建水平滚动视图，我们需要使用 FlatList 组件。在以下例子中，我们将使用两个数组作为数据源。第一个数组包含每个水平滚动项的文本，第二个数组包含每个滚动项所要显示的图像地址。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- --------- ----- - ---- ---------------
----- ---- - -
------ ------ --- ----- --- ----- --- ----- --- ----- --- ----- ----
------- -
-----------------------------------------
-----------------------------------------
-----------------------------------------
-----------------------------------------
-----------------------------------------
-----------------------------------------
--
--
------ ------- -------- ---------------------- -
------ -
----- -------- ----- - ---
---------
----------
-----------------
-------------- ----- ----- -- -- -
----- -------- ------- -- ---
------
--------- ---- ------------------ --
-------- ------ ---- ------- --- --
--
----- -------- ---------- --------- ---------- -- ----------------
-------
--
-------------------- ------ -- -----------------
--
-------
--
-在上面的示例代码中，我们首先定义了数据源数组。然后，我们使用 FlatList 组件来显示我们的水平滚动视图。我们将所有的 FlatList 属性都设置为默认值，除了以下几项：
horizontal：将 FlatList 设置为水平滚动视图data：指定 FlatList 的数据源数组renderItem：定义为一个函数，用于渲染每个数据项。在本例中，我们在每个数据项上放置一个包含文本和图像的视图。请注意，我们使用index参数从第二个数组中获取图像的 URI。keyExtractor：定义为一个函数，用于从给定的数据项中提取唯一键。在本例中，我们使用index参数作为唯一键。
启动您的 React Native 应用程序，就可以看到一个漂亮的水平滚动视图了！
结论
在本文中，我们介绍了如何在 React Native 应用程序中创建水平滚动视图。我们使用 FlatList 组件，指定数据源和渲染每个数据项的函数，并设置一些相应的属性。这个示例代码可以作为您日后的模板来快速创建水平滚动视图。希望本文对您学习 React Native 有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/677269196d66e0f9aad8c968