From f728127e51536e3ac9b6f238a842a9e3a8b50570 Mon Sep 17 00:00:00 2001 From: ywd17362752007 <3182569902@qq.com> Date: Fri, 9 Aug 2024 10:35:28 +0800 Subject: [PATCH 1/2] =?UTF-8?q?test:=20=E4=BF=AE=E6=94=B9react-native-cale?= =?UTF-8?q?ndars=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-calendars.md | 181 ++++++++++++++++++++++++++++++-- 1 file changed, 172 insertions(+), 9 deletions(-) diff --git a/zh-cn/react-native-calendars.md b/zh-cn/react-native-calendars.md index 4c2b91c7..a67ae68d 100644 --- a/zh-cn/react-native-calendars.md +++ b/zh-cn/react-native-calendars.md @@ -33,7 +33,7 @@ yarn install --save react-native-calendars@1.1304.1 ```js import React, { useState } from "react"; -import { Calendar, CalendarList, Agenda } from "react-native-calendars"; +import { Calendar, CalendarList, Agenda ,AgendaList,CalendarProvider,ExpandableCalendar,Timeline,WeekCalendar} from "react-native-calendars"; import { View, StyleSheet } from "react-native"; const MySvgComponent = () => { @@ -52,8 +52,41 @@ const MySvgComponent = () => { }, }} /> + + + + + + ); + }; const styles = StyleSheet.create({ @@ -78,19 +111,67 @@ export default MySvgComponent; 1. RNOH: 0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; -## 属性 +## 属性和方法 > [!tip] "Platform"列表示该属性在原三方库上支持的平台。 -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性或者方法；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +## Agenda + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| items | the list of items that have to be displayed in agenda. If you want to render item as empty date the value of date key has to be an empty array []. If there exists no value for date key it is considered that the date in question is not yet loaded | AgendaSchedule | no | All | yes | +| selected | initially selected day | string | no | All | yes | +| hideKnob | Whether to hide the knob | boolean | no | All | yes | +| showClosingKnob | Whether the knob should always be visible (when hideKnob = false) | boolean | no | All | yes | +| showOnlySelectedDayItems | Whether to show items only for the selected date | boolean | no | All | yes | + +###### API + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| loadItemsForMonth | Handler which gets executed when items for a certain month should be loaded (month became visible) | function | no | All | yes | +| onDayChange | Handler which gets executed when day changes while scrolling agenda list | function | no | All | yes | +| onCalendarToggled | Handler which gets executed when the calendar is opened or closed | function | no | All | yes | +| renderKnob | Replace default agenda's knob with a custom one | function | no | All | yes | +| renderEmptyData | Replace default ActivityIndicator with a custom one | function | no | All | yes | + +## AgendaList + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| theme | Specify theme properties to override specific styles for calendar parts | Theme | no | All | yes | +| dayFormat | Day format in section title. Formatting values: http://arshaw.com/xdate/#Formatting | string | no | All | yes | +| useMoment | Whether to use moment.js for date string formatting | boolean | no | All | yes | +| markToday | Whether to mark today's title with the 'Today, ...' string | boolean | no | All | yes | +| avoidDateUpdates | Whether to block the date change in calendar (and calendar context provider) when agenda scrolls | boolean | All | yes | +| scrollToNextEvent | Whether to enable scrolling the agenda list to the next date with content when pressing a day without content | boolean | All | yes | +| viewOffset | Offset scroll to the section | number | All | yes | +| sectionStyle | The style passed to the section view | ViewStyle | All | yes | + +###### API + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| dayFormatter | A function to custom format the section header's title | function | no | All | yes | + + +## Calendar | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | | theme | Specify theme properties to override specific styles for calendar parts | Theme | no | All | yes | | firstDay | If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday | number | no | All | yes | +| hideArrows | Whether to hide the arrows | boolean | no | All | yes | +| disableArrowLeft | Whether to disable the left arrow | boolean | no | All | yes | +| disableArrowRight | Whether to disable the right arrow | boolean | no | All | yes | +| arrowsHitSlop | Left & Right arrows. Additional distance outside of the buttons in which a press is detected, default: 20 | number | no | All | yes | +| hideDayNames | Whether to hide the days names | boolean | no | All | yes | +| monthFormat | Month format for the header's title. Formatting values | string | no | All | yes | | displayLoadingIndicator | Display loading indicator | boolean | no | All | yes | | showWeekNumbers | Show week numbers | boolean | no | All | yes | | style | Specify style for calendar container element | StyleProp | no | All | yes | +| disabledDaysIndexes | Whether to apply custom disable color to selected day indexes | number[] | no | All | yes | | current | Initially visible month | string | no | All | yes | | initialDate | Initially visible month. If changed will initialize the calendar to this value | string | no | All | yes | | minDate | Minimum date that can be selected, dates before minDate will be grayed out | string | no | All | yes | @@ -104,12 +185,11 @@ export default MySvgComponent; | headerStyle | Style passed to the header | StyleProp | no | All | yes | | customHeader | Allow rendering a totally custom header | any | no | All | yes | | allowSelectionOutOfRange | Allow selection of dates before minDate or after maxDate | boolean | no | All | yes | - -## API - -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +| disableAllTouchEventsForDisabledDays | Whether to disable all touch events for disabled days (can be override with 'disableTouchEvent' in 'markedDates') | boolean | no | All | yes | +| disableAllTouchEventsForInactiveDays | Whether to disable all touch events for inactive days (can be override with 'disableTouchEvent' in 'markedDates') | boolean | no | All | yes | +| customHeaderTitle | Replace default title with custom element | JSX.Element | no | All | yes | +| dayComponent | Replace default day with custom day rendering component element | JSX.Element | no | All | yes | +###### API | Name | Description | Type | Required | Platform | HarmonyOS Support | | --------------------- | ------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | @@ -117,6 +197,89 @@ export default MySvgComponent; | onDayLongPress | Handler which gets executed on day long press | function | no | All | yes | | onMonthChange | Handler which gets executed when month changes in calendar | function | no | All | yes | | onVisibleMonthsChange | Handler which gets executed when visible month changes in calendar | function | no | All | yes | +| onPressArrowLeft | Handler which gets executed when press left arrow. It receive a callback to go to the previous month | function | no | All | yes | +| onPressArrowRight | Handler which gets executed when press right arrow. It receive a callback to go to the next month | function | no | All | yes | +| renderArrow | Replace default arrows with custom ones (direction: 'left','right') | function | no | All | yes | +| renderHeader | Replace default title with custom one | function | no | All | yes | + +## CalendarList + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| pastScrollRange | Max amount of months allowed to scroll to the past | number | no | All | yes | +| futureScrollRange | Max amount of months allowed to scroll to the future | number | no | All | yes | +| calendarStyle | Specify style for calendar container element | ViewStyle | no | All | yes | +| calendarHeight | Dynamic calendar height | number | no | All | yes | +| calendarWidth | Used when calendar scroll is horizontal, (when pagingEnabled = false) | number | no | All | yes | +| staticHeader | Whether to use a fixed header that doesn't scroll (when horizontal = true) | boolean | no | All | yes | +| showScrollIndicator | Whether to enable or disable vertical / horizontal scroll indicator | boolean | no | All | yes | + +## CalendarProvider + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| theme | Specify theme properties to override specific styles for calendar parts | Theme | no | All | yes | +| style | Specify style for calendar container element | ViewStyle | no | All | yes | +| date | Initial date in 'yyyy-MM-dd' format | string | no | All | yes | +| showTodayButton | Whether to show the today button | boolean | no | All | yes | +| todayButtonStyle | Today button's style | ViewStyle | no | All | yes | +| todayBottomMargin | Today button's top position | number | no | All | yes | +| disabledOpacity | The opacity for the disabled today button (0-1) | number | no | All | yes | +###### API + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| onDateChanged | Handler which gets executed when the date changes | function | no | All | yes | +| onMonthChange | Handler which gets executed when the month changes | function | no | All | yes | + +## ExpandableCalendar + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| initialPosition | The initial position of the calendar ('open' or 'closed') | Positions | no | All | yes | +| disablePan | Whether to disable the pan gesture and disable the opening and closing of the calendar (initialPosition will persist) | boolean | no | All | yes | +| hideKnob | Whether to hide the knob | boolean | no | All | yes | +| leftArrowImageSource | The source for the left arrow image | ImageSourcePropType | no | All | yes | +| rightArrowImageSource | The source for the right arrow image | ImageSourcePropType | no | All | yes | +| allowShadow | Whether to have shadow/elevation for the calendar | boolean | no | All | yes | +| disableWeekScroll | Whether to disable the week scroll in closed position | boolean | no | All | yes | +| openThreshold | The threshold for opening the calendar with the pan gesture | number | no | All | yes | +| closeThreshold | closeThreshold | number | no | All | yes | +| openThreshold | The threshold for opening the calendar with the pan gesture | number | no | All | yes | +| closeOnDayPress | Whether to close the calendar on day press| boolean | no | All | yes | +###### API + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| onCalendarToggled | HHandler which gets executed when the calendar is opened or closed | function | no | All | yes | + +## Timeline + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| theme | Specify theme properties to override specific styles for calendar parts | Theme | no | All | yes | +| style | Specify style for calendar container element | ViewStyle | no | All | yes | +| events | List of events to render on the timeline | Event[] | no | All | yes | +| start | The timeline day start time | number | no | All | yes | +| end | The timeline day end time | number | no | All | yes | +| scrollToFirst | Whether to scroll to the first event | boolean | no | All | yes | +| format24h | Whether to use 24 hours format for the timeline hours | boolean | no | All | yes | + +###### API + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| onEventPress | Handler which gets executed when event is pressed | function | no | All | yes | +| onBackgroundLongPress | Handler which gets executed when background is long pressed. Pass to handle creation of a new event | function | no | All | yes | +| onBackgroundLongPressOut | Handler which gets executed when background's long pressed released. Pass to handle creation of a new event | function | no | All | yes | +| renderEvent | Specify a custom event block | function | no | All | yes | + +## WeekCalendar + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ---------------------------------------------------------------------------------------------------------- | -------------------- | -------- | -------- | ----------------- | +| allowShadow | Whether to have shadow/elevation for the calendar | boolean | no | All | yes | +| hideDayNames | Whether to hide the names of the week days | boolean | no | All | yes | ## 遗留问题 -- Gitee From aabfe30e12ac2049a9cbd00cd126b51ed97dbb4f Mon Sep 17 00:00:00 2001 From: yinjiarui Date: Mon, 12 Aug 2024 20:11:07 +0800 Subject: [PATCH 2/2] =?UTF-8?q?docs:=20[https://gitee.com/gitee=5Fywd/usag?= =?UTF-8?q?e-docs/issues/IAJITD]=20=E6=96=B0=E5=A2=9Ereact-native-bounceab?= =?UTF-8?q?le=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-bounceable.md | 123 +++++++++++++++++++++++++++++++ 1 file changed, 123 insertions(+) create mode 100644 zh-cn/react-native-bounceable.md diff --git a/zh-cn/react-native-bounceable.md b/zh-cn/react-native-bounceable.md new file mode 100644 index 00000000..8d687ef5 --- /dev/null +++ b/zh-cn/react-native-bounceable.md @@ -0,0 +1,123 @@ +> 模板版本：v0.2.2 + + + +# `react-native-bounceable` + +[![Supported platforms](https://img.shields.io/badge/platforms-android%20%7C%20ios%20%7C%20harmony%20-lightgrey.svg) ](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fwix%2Freact-native-calendars)[![License](https://img.shields.io/badge/license-MIT-green.svg)](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fwix%2Freact-native-calendars%2Fblob%2Fmaster%2FLICENSE) + +> [!TIP] [Github 地址]([WrathChaos/react-native-bounceable: 🚀 Animate and bounce any component with RNBounceable for React Native (github.com)](https://github.com/WrathChaos/react-native-bounceable)) + +## 安装与使用 + +进入到工程目录并输入以下命令： + +### ** npm** + +```bash +npm i @freakycoder/react-native-bounceable +``` + + + +下面的代码展示了这个库的基本使用场景： + +1、引入库文件 + +```jsx +import RNBounceable from "@freakycoder/react-native-bounceable"; +``` + +2、使用场景： + +您可以将**任何子组件**放入 **RNBounceable** 组件中，当它被按下时，它会使其反弹 + +```jsx + {}}> + + Bounce + + +``` + +详细使用场景 + +```javascript +import React from 'react'; +import type { PropsWithChildren } from 'react'; +import { StyleSheet, View, Text }from 'react-native'; +import RNBounceable from "@freakycoder/react-native-bounceable"; + +let flag:boolean = true; +export function BounceableExample () { + const customStyle = { + backgroundColor: 'red', + padding: 10, + borderRadius: 100, + alignItems: 'center', + justifyContent: 'center', + }; + + + Press Me + +} + +const styles = StyleSheet.create({ + container: { + width: '100%', + height: '100%', + }, + bounceStyle: { + backgroundColor: 'lightblue' + }, + textStyle: { + fontSize: 20, + color: 'red', + }, + }); +``` + + + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证： + +1. RNOH: 0.72.28; SDK：HarmonyOS NEXT Developer Beta2; IDE：DevEco Studio 5.0.3.500; ROM：5.0.0.31; + +## 属性和方法 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Property | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | -------------------------------------------- | :-------------: | :------: | ----------- | ----------------- | +| bounceEffectIn | 按下时缩小到原始大小的xx（如：0.1） | number | yes | iOS/Android | yes | +| bounceEffectOut | 松开时稍微放大到原始大小的xx（如：1.5） | number | yes | iOS/Android | yes | +| bounceVelocityIn | 按下时的速度 | number | yes | iOS/Android | yes | +| bounceVelocityOut | 松开时的速度 | number | yes | iOS/Android | yes | +| bouncinessIn | 按下时的弹性系数（设置值0-50有明显效果显示） | number | yes | iOS/Android | yes | +| bouncinessOut | 松开时的弹性系数（设置值0-50有明显效果显示） | number | yes | iOS/Android | yes | +| onPress | 为 onPress 功能设置您自己的逻辑 | void | yes | iOS/Android | yes | +| style | 像设置任何其他 View 容器一样设置样式 | CustomStyleProp | yes | iOS/Android | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2FTehShrike%2Fdeepmerge%2Fblob%2Fmaster%2Flicense.txt) ，请自由地享受和参与开源。 -- Gitee