在 React Native 开发中，我们经常需要使用评分组件来对某个产品或者服务进行评价。这时，可以使用 npm 包中的 react-native-ratings 来方便地实现这个功能。
安装
在使用 react-native-ratings 前，首先需要在命令行中输入以下指令来安装该模块：
npm i react-native-ratings --save
使用
要在 React Native 中使用 react-native-ratings，我们需要引入所需的组件。在本例子中，我们将使用 StarRating 组件来实现评分功能。在组件中，我们可以将评分分为五个等级，并且还可以使用类型为 “heart” 或者 “rocket”的自定义符号。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ---- - ---- ---------------
------ ---------- ---- -----------------------
----- ------- ------- --------------- -
-------- -
------ -
----- -------------------------
-----------
----------------
------------
----------
-------------
--
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
-
---
------ ------- --------上述示例代码中，我们在 Example 组件中引入了 react-native-ratings 中的 StarRating 组件，并将它放在一个 View 中展示。其中，StarRating 组件的 disabled 属性表示是否禁用评分功能，maxStars 属性表示星星的数量，rating 属性表示默认评分等级，starSize 属性表示星星的大小。
深入理解
接下来，我们来了解一下如何使用自定义符号来替换评分中默认的星星。在 react-native-ratings 中，我们需要使用一个名叫 Ratings 的组件，并在其中定义我们自己的符号。在下面的示例代码中，我们将使用类型为 “heart” 的符号替换默认的星星：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ---- - ---- ---------------
------ - ------- - ---- -----------------------
----- ------- ------- --------------- -
-------- -
------ -
----- -------------------------
--------
------------
---------------
--------------
--
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
-
---
------ ------- --------上述示例代码中，我们在 Example 组件中引入 Ratings 组件，并将其中的 type 属性设置为 “heart”，表示使用类型为 “heart” 的自定义符号。ratingCount 属性表示评分的等级数量，imageSize 属性表示符号的大小。
结论
在 React Native 开发中，使用 react-native-ratings 的 StarRating 组件和 Ratings 组件可以方便地实现评分功能。同时，我们还可以使用自定义符号来替换默认的星星，从而实现更加符合产品或者服务特点的评价方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/168441