From 5a7e2de8111c813ef295eb7f878242e7bd4c171c Mon Sep 17 00:00:00 2001 From: wangyizhou Date: Sat, 4 May 2024 15:55:23 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I9LLIL]=20=E6=96=B0=E5=A2=9Ereact-n?= =?UTF-8?q?ative-ratings=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-ratings.md | 181 ++++++++++++++++++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 zh-cn/react-native-ratings.md diff --git a/zh-cn/react-native-ratings.md b/zh-cn/react-native-ratings.md new file mode 100644 index 00000000..5c1b1033 --- /dev/null +++ b/zh-cn/react-native-ratings.md @@ -0,0 +1,181 @@ +> 模板版本：v0.2.0 + +

+

react-native-ratings

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/Monte9/react-native-ratings) + +## 安装与使用 + + + +#### **npm** + +```bash +npm install --save react-native-ratings +``` + +#### **yarn** + +```bash +yarn add react-native-ratings +``` + + + +下面的代码展示了这个库的基本使用场景： + +```tsx +import React, { useState } from 'react'; +import { View, Text, StyleSheet } from 'react-native'; +import { Rating, AirbnbRating } from 'react-native-ratings'; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + padding: 20, + backgroundColor: '#f2f2f2', + }, + title: { + fontSize: 18, + fontWeight: 'bold', + marginTop: 20, + marginBottom: 10, + } +}); + +export function RatingsDemo () { + const [rating, setRating] = useState(3); + + const ratingCompleted = (rating: number) => { + console.log("Rating is: " + rating); + setRating(rating); + }; + + return ( + + Standard Rating + + + Custom Icon Rating + + + Airbnb Rating + + + Read-only Rating + + + Fractional Rating + + + ); +}; + +``` + +## 约束与限制 + +#### 兼容性 + +在下述版本验证通过： + +RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; + +#### 属性 + +### 此组件有以下属性: + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :-----------------------: | :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | +| **type** | Choose one of the built-in types: star, rocket, bell, heart or use type custom to render a custom image (optional) | String | No | iOS/Android | Yes | +| **ratingImage** | Pass in a custom image source; use this along with type='custom' prop above (optional) | String | YES | iOS/Android | Yes | +| **ratingColor** | Pass in a custom fill-color for the rating icon; use this along with type='custom' prop above (optional) | String | No | iOS/Android | Yes | +| **ratingBackgroundColor** | Pass in a custom background-fill-color for the rating icon; use this along with type='custom' prop above (optional) | String | No | iOS/Android | Yes | +| **tintColor** | Color used to change the background of the rating icon (optional) | String | No | iOS/Android | Yes | +| **ratingCount** | The number of rating images to display (optional) | number | No | iOS/Android | Yes | +| **ratingTextColor** | Color used for the text labels | String | No | iOS/Android | Yes | +| **imageSize** | The size of each rating image (optional) | number | No | iOS/Android | Yes | +| **showRating** | Displays the Built-in Rating UI to show the rating value in real-time (optional) | boolean | No | iOS/Android | Yes | +| **readonly** | Whether the rating can be modiefied by the user | boolean | No | iOS/Android | Yes | +| **startingValue** | The initial rating to render | number | No | iOS/Android | Yes | +| **fractions** | The number of decimal places for the rating value; must be between 0 and 20 | number | No | iOS/Android | Yes | +| **minValue** | The minimum value the user can select | number | No | iOS/Android | Yes | +| **style** | Exposes style prop to add additonal styling to the container view (optional) | style | No | iOS/Android | Yes | +| **jumpValue** | The value to jump when rating value changes (if jumpValue === 0.5, rating value increases/decreases like 0, 0.5, 1.0, 1.5 ...). Default is 0 (not to jump) | number | No | iOS/Android | Yes | +| **onStartRating** | Callback method when the user starts rating. Gives you the start rating value as a whole number | function | No | iOS/Android | Yes | +| **onSwipeRating** | Callback method when the user is swiping. Gives you the current rating value as a whole number | function | No | iOS/Android | Yes | +| **onFinishRating** | Callback method when the user finishes rating. Gives you the final rating value as a whole number (required) | function | No | iOS/Android | Yes | + +## **API（AirbnbRating）** + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :-----------------------: | :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | +| **defaultRating** | Initial value for the rating | number | No | iOS/Android | Yes | +| **reviews** | Labels to show when each value is tapped e.g. If the first star is tapped, then value in index 0 will be used as the label | string | No | iOS/Android | Yes | +| **count** | Total number of ratings to display | number | No | iOS/Android | Yes | +| **selectedColor** | Pass in a custom fill-color for the rating icon | string | No | iOS/Android | Yes | +| **unSelectedColor** | Pass in a custom not fill-color for the rating icon | string | No | iOS/Android | Yes | +| **reviewColor** | Pass in a custom text color for the review text | string | No | iOS/Android | Yes | +| **size** | The size of each rating image (optional) | number | No | iOS/Android | Yes | +| **reviewSize** | Pass in a custom font size for the review text | number | No | iOS/Android | Yes | +| **showRating** | Determines if to show the reviews above the rating | boolean | No | iOS/Android | Yes | +| **isDisabled** | Whether the rating can be modiefied by the user | boolean | No | iOS/Android | Yes | +| **onFinishRating** | Callback method when the user finishes rating. Gives you the final rating value as a whole number | function | No | iOS/Android | Yes | +| **starContainerStyle** | Custom styles applied to the star container | object | No | iOS/Android | Yes | +| **ratingContainerStyle** | Custom styles applied to the rating container | object | No | iOS/Android | Yes | +| **starImage** | Pass in a custom base image source (optional) | string | No | iOS/Android | Yes | +| **starStyle** | Custom styles applied to the star (optional) | object | No | iOS/Android | Yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [MIT License](https://github.com/Monte9/react-native-ratings/blob/master/LICENSE) ，请自由地享受和参与开源。 +, \ No newline at end of file -- Gitee