From accff782c8974ae60e7bda1f93eeb42d22b22c6d Mon Sep 17 00:00:00 2001 From: "haoyuan.chen" Date: Mon, 15 Sep 2025 17:55:11 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A00.77=20=E4=B8=89?= =?UTF-8?q?=E6=96=B9=E5=BA=93=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: haoyuan.chen --- zh-cn/react-native-calendars.md | 316 +++++++++++++++--------- zh-cn/react-native-deck-swiper.md | 10 +- zh-cn/react-native-exception-handler.md | 66 ++++- zh-cn/react-native-file-selector.md | 102 +++++++- zh-cn/react-native-image-zoom-viewer.md | 24 +- zh-cn/react-native-swiper.md | 32 ++- zh-cn/react-native-touch-id.md | 102 +++++++- zh-cn/react-native-video-cache.md | 109 +++++++- 8 files changed, 625 insertions(+), 136 deletions(-) diff --git a/zh-cn/react-native-calendars.md b/zh-cn/react-native-calendars.md index 07ec0073..fac692b8 100644 --- a/zh-cn/react-native-calendars.md +++ b/zh-cn/react-native-calendars.md @@ -16,16 +16,24 @@ ## 安装与使用 +进入到工程目录并输入以下命令： + #### **npm** ```bash +#0.72 npm install --save react-native-calendars@1.1304.1 +#0.77 +npm install --save react-native-calendars@1.1313.0 ``` #### **yarn** ```bash -yarn install --react-native-calendars@1.1304.1 +#0.72 +yarn add react-native-calendars@1.1304.1 +#0.77 +yarn add react-native-calendars@1.1313.0 ``` 下面的代码展示了这个库的基本使用场景： @@ -131,141 +139,219 @@ export default MySvgComponent; > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +### Theme + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :----------------------------------------------------------- | :--------------------------------------------------- | :------------------------ | :------- | :------- | :---------------- | +| timelineContainer | Style object for the timeline container | `object` | No | All | Yes | +| contentStyle | View style for the content area | `ViewStyle` | No | All | Yes | +| event | Style object for events | `object` | No | All | Yes | +| eventTitle | Style object for event titles | `object` | No | All | Yes | +| eventSummary | Style object for event summaries | `object` | No | All | Yes | +| eventTimes | Style object for event times | `object` | No | All | Yes | +| line | Style for the timeline line | `object` | No | All | Yes | +| verticalLine | Style object for vertical lines | `object` | No | All | Yes | +| nowIndicatorLine | Style for the current time indicator line | `object` | No | All | Yes | +| nowIndicatorKnob | Style for the current time indicator knob | `object` | No | All | Yes | +| timeLabel | Style object for time labels | `object` | No | All | Yes | +| todayTextColor | Text color for today's date | `string` | No | All | Yes | +| calendarBackground | Calendar background color | `string` | No | All | Yes | +| indicatorColor | Indicator color | `string` | No | All | Yes | +| textSectionTitleColor | Text color for section titles | `string` | No | All | Yes | +| textSectionTitleDisabledColor | Text color for disabled section titles | `string` | No | All | Yes | +| dayTextColor | Text color for days | `string` | No | All | Yes | +| selectedDayTextColor | Text color for selected days | `string` | No | All | Yes | +| monthTextColor | Text color for months | `string` | No | All | Yes | +| selectedDayBackgroundColor | Background color for selected days | `string` | No | All | Yes | +| arrowColor | Arrow color | `string` | No | All | Yes | +| textDisabledColor | Text color for disabled elements | `string` | No | All | Yes | +| textInactiveColor | Text color for inactive elements | `string` | No | All | Yes | +| backgroundColor | Background color (Deprecated, will be removed in V2) | `string` | No | All | Yes | +| dotColor | Color for date dots | `string` | No | All | Yes | +| selectedDotColor | Color for dots on selected dates | `string` | No | All | Yes | +| disabledArrowColor | Color for disabled arrows | `string` | No | All | Yes | +| textDayFontFamily | Font family for day text | `TextStyle['fontFamily']` | No | All | Yes | +| textMonthFontFamily | Font family for month text | `TextStyle['fontFamily']` | No | All | Yes | +| textDayHeaderFontFamily | Font family for day header text | `TextStyle['fontFamily']` | No | All | Yes | +| textDayFontWeight | Font weight for day text | `TextStyle['fontWeight']` | No | All | Yes | +| textMonthFontWeight | Font weight for month text | `TextStyle['fontWeight']` | No | All | Yes | +| textDayHeaderFontWeight | Font weight for day header text | `TextStyle['fontWeight']` | No | All | Yes | +| textDayFontSize | Font size for day text | `number` | No | All | Yes | +| textMonthFontSize | Font size for month text | `number` | No | All | Yes | +| textDayHeaderFontSize | Font size for day header text | `number` | No | All | Yes | +| agendaDayTextColor | Text color for agenda days | `string` | No | All | Yes | +| agendaDayNumColor | Color for agenda day numbers | `string` | No | All | Yes | +| agendaTodayColor | Color for today's date in agenda | `string` | No | All | Yes | +| agendaKnobColor | Color for the agenda knob | `string` | No | All | Yes | +| todayButtonFontFamily | Font family for the today button text | `TextStyle['fontFamily']` | No | All | Yes | +| todayButtonFontWeight | Font weight for the today button text | `TextStyle['fontWeight']` | No | All | Yes | +| todayButtonFontSize | Font size for the today button text | `number` | No | All | Yes | +| textDayStyle | Text style for days | `TextStyle` | No | All | Yes | +| dotStyle | Style for date dots | `object` | No | All | Yes | +| arrowStyle | Style for arrows | `ViewStyle` | No | All | Yes | +| todayBackgroundColor | Background color for today's date | `string` | No | All | Yes | +| disabledDotColor | Color for disabled date dots | `string` | No | All | Yes | +| inactiveDotColor | Color for inactive date dots | `string` | No | All | Yes | +| todayDotColor | Color for the dot on today's date | `string` | No | All | Yes | +| todayButtonTextColor | Text color for the today button | `string` | No | All | Yes | +| todayButtonPosition | Position of the today button | `string` | No | All | Yes | +| arrowHeight | Height of arrows | `number` | No | All | Yes | +| arrowWidth | Width of arrows | `number` | No | All | Yes | +| weekVerticalMargin | Vertical margin for weeks | `number` | No | All | Yes | +| reservationsBackgroundColordeprecated form 1.1313.0 | Background color for reservations | `string` | No | All | Yes | +| stylesheet.calendar | Overall style configuration for the calendar | `object` | No | All | Yes | +| stylesheet.calendar.main | Style for the main calendar container | `object` | No | All | Yes | +| stylesheet.calendar.header | Style for the calendar header | `object` | No | All | Yes | +| stylesheet.day | Style configuration for days | `object` | No | All | Yes | +| stylesheet.day.basic | Style for basic days | `object` | No | All | Yes | +| stylesheet.day.period | Style for period days | `object` | No | All | Yes | +| stylesheet.dot | Style configuration for date dots | `object` | No | All | Yes | +| stylesheet.marking | Style configuration for markings | `object` | No | All | Yes | +| stylesheet.'calendar-list' | Style configuration for the calendar list | `object` | No | All | Yes | +| stylesheet.'calendar-list'.main | Style for the main calendar list container | `object` | No | All | Yes | +| stylesheet.agenda | Style configuration for the agenda | `object` | No | All | Yes | +| stylesheet.agenda.main | Style for the main agenda container | `object` | No | All | Yes | +| stylesheet.agenda.list | Style for the agenda list | `object` | No | All | Yes | +| stylesheet.expandable | Style configuration for expandable components | `object` | No | All | Yes | +| stylesheet.expandable.main | Style for the main expandable component container | `object` | No | All | Yes | + ### 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 | -| 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 | +| 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 | +| 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 | +| renderList | override inner list with a custom implemented component | 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 | no | All | yes | -| scrollToNextEvent | hether to enable scrolling the agenda list to the next date with content when pressing a day without content | boolean | no | All | yes | -| viewOffset | Offset scroll to the section | number | no | All | yes | -| sectionStyle | The style passed to the section view | ViewStyle | no | All | yes | -| dayFormatter | A function to custom format the section header's title | function | no | All | yes | +| 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 | no | All | yes | +| scrollToNextEvent | hether to enable scrolling the agenda list to the next date with content when pressing a day without content | boolean | no | All | yes | +| viewOffset | Offset scroll to the section | number | no | All | yes | +| sectionStyle | The style passed to the section view | ViewStyle | no | All | yes | +| dayFormatter | A function to custom format the section header's title | function | no | All | yes | +| infiniteListProps | If defined, uses InfiniteList instead of SectionList. This feature is experimental and subject to change. | object | 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 | -| maxDate | Maximum date that can be selected, dates after maxDate will be grayed out | string | no | All | yes | -| markedDates | Collection of dates that have to be marked | MarkedDates | no | All | yes | -| hideExtraDays | Do not show days of other months in month page | boolean | no | All | yes | -| showSixWeeks | Always show six weeks on each month (only when hideExtraDays = false) | boolean | no | All | yes | -| disableMonthChange | Disables changing month when click on days of other months (when hideExtraDays is false) | boolean | no | All | yes | -| enableSwipeMonths | Enable the option to swipe between months | boolean | no | All | yes | -| disabledByDefault | Disable days by default | boolean | no | All | yes | -| headerStyle | Style passed to the header | StyleProp | no | All | yes | -| allowSelectionOutOfRange | Allow selection of dates before minDate or after maxDate | boolean | no | All | yes | -| 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 | -| dayComponent | Replace default day with custom day rendering component element | JSX.Element | no | All | yes | -| customHeaderTitle | Replace default title with custom element | JSX.Element | no | All | yes | -| customHeader | Allow rendering a totally custom header | any | no | All | yes | -| onDayPress | Handler which gets executed on day press | function | no | All | yes | -| 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 | +| 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 | StyleProp | 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 | +| maxDate | Maximum date that can be selected, dates after maxDate will be grayed out | string | no | All | yes | +| markedDates | Collection of dates that have to be marked | MarkedDates | no | All | yes | +| hideExtraDays | Do not show days of other months in month page | boolean | no | All | yes | +| showSixWeeks | Always show six weeks on each month (only when hideExtraDays = false) | boolean | no | All | yes | +| disableMonthChange | Disables changing month when click on days of other months (when hideExtraDays is false) | boolean | no | All | yes | +| enableSwipeMonths | Enable the option to swipe between months | boolean | no | All | yes | +| disabledByDefault | Disable days by default | boolean | no | All | yes | +| headerStyle | Style passed to the header | StyleProp | no | All | yes | +| customHeader | Allow rendering a totally custom header | any | no | All | yes | +| onDayPress | Handler which gets executed on day press | function | no | All | yes | +| 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 | +| disabledByWeekDaysdeprecated form 1.1313.0 | Disable dates by days of the week (Sunday=0) | number[] | no | All | yes | +| testID | Test ID | string | no | All | yes | +| allowSelectionOutOfRange | Allow selection of dates before minDate or after maxDate | boolean | 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 | +| 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 | +| animateScroll | Whether to animate the auto month scroll | 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 | -| onDateChanged | Handler which gets executed when the date changes | function | no | All | yes | -| onMonthChange | Handler which gets executed when the month changes 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 | -| onCalendarToggled | Handler which gets executed when the calendar is opened or closed | function | no | All | yes | +| 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 | +| onDateChanged | Handler which gets executed when the date changes | function | no | All | yes | +| onMonthChange | Handler which gets executed when the month changes changes | function | no | All | yes | +| disableAutoDaySelectiondeprecated form 1.1313.0 | The calendar navigation type in which to disable the auto day selection (get options from ExpandableCalendar.navigationTypes) | CalendarNavigationTypes[] | no | All | yes | +| numberOfDays | The number of days to present in the timeline calendar | number | no | All | yes | +| timelineLeftInset | The left inset of the timeline calendar (sidebar width), default is 72 | number | no | All | yes | + +### ExpandableCalendar A + +| 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 | +| onCalendarToggled | Handler which gets executed when the calendar is opened or closed | function | no | All | yes | +| closeOnDayPress | Whether to close the calendar on day press. Default = true | boolean | 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 | -| 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 | +| 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 | +| 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 | +| date | The date / dates of this timeline instance in ISO format (e.g. 2011-10-25) | string \|string[] | no | All | yes | +| eventTapped | Use onEventPress instead | function | no | All | yes | +| scrollToNow | Should scroll to current time when loaded | boolean | no | All | yes | +| initialTime | Initial time to scroll to | object | no | All | yes | +| showNowIndicator | Whether to show now indicator | boolean | no | All | yes | +| scrollOffset | A scroll offset value that the timeline will sync with | nmber | no | All | yes | +| onChangeOffset | Listen to onScroll event of the timeline component | function | no | All | yes | +| overlapEventsSpacing | Spacing between overlapping events | number | no | All | yes | +| rightEdgeSpacing | Spacing to keep at the right edge (for background press) | number | no | All | yes | +| unavailableHours | Range of available hours | UnavailableHours[] | no | All | yes | +| unavailableHoursColor | Background color for unavailable hours | string | no | All | yes | +| numberOfDays | The number of days to present in the timeline calendar | number | no | All | yes | +| timelineLeftInset | The left inset of the timeline calendar (sidebar width), default is 72 | number | no | All | yes | +| testID | Identifier for testing | string | 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 | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------- | ------------------------------------------------- | ------- | -------- | -------- | ----------------- | +| allowShadow | Whether to have shadow/elevation for the calendar | boolean | no | All | yes | ## 遗留问题 diff --git a/zh-cn/react-native-deck-swiper.md b/zh-cn/react-native-deck-swiper.md index 52f58530..f49f357f 100644 --- a/zh-cn/react-native-deck-swiper.md +++ b/zh-cn/react-native-deck-swiper.md @@ -12,7 +12,7 @@

-> [!TIP] [Github 地址](https://github.com/alexbrillant/react-native-deck-swiper) +> [!TIP] [Github 地址](https://github.com/webraptor/react-native-deck-swiper) ## 安装与使用 @@ -21,13 +21,21 @@ #### **npm** ```bash +#0.72 npm install react-native-deck-swiper@2.0.17 + +#0.77 +npm install react-native-deck-swiper@2.0.19 ``` #### **yarn** ```bash +#0.72 yarn add react-native-deck-swiper@2.0.17 + +#0.77 +yarn add react-native-deck-swiper@2.0.19 ``` diff --git a/zh-cn/react-native-exception-handler.md b/zh-cn/react-native-exception-handler.md index c991de88..610b6a27 100644 --- a/zh-cn/react-native-exception-handler.md +++ b/zh-cn/react-native-exception-handler.md @@ -16,7 +16,16 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-exception-handler Releases](https://github.com/react-native-oh-library/react-native-exception-handler/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.10.10 | [@react-native-oh-tpl/react-native-exception-handler Releases](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | 0.72 | +| 2.10.11 | [@react-native-ohos/react-native-exception-handler Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 + + 进入到工程目录并输入以下命令： @@ -25,13 +34,21 @@ #### **npm** ```bash +# V2.10.10 npm install @react-native-oh-tpl/react-native-exception-handler + +#V 2.10.11 +npm install @react-native-ohos/react-native-exception-handler ``` #### **yarn** ```bash +# V2.10.10 yarn add @react-native-oh-tpl/react-native-exception-handler + +#V 2.10.11 +yarn add @react-native-ohos/react-native-exception-handler ``` @@ -115,6 +132,14 @@ export const ReactNativeExceptionHandler = () => { }; ``` + + +## 使用 Codegen + +> [!TIP] V2.10.11 不需要执行 Codegen。 + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](https://gitee.com/react-native-oh-library/usage-docs/blob/39316eccca7657d77dfdc9e90cfbf64e6a7713f3/zh-cn/codegen.md)。 + ## Link 目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 @@ -145,6 +170,8 @@ export const ReactNativeExceptionHandler = () => { 打开 `entry/oh-package.json5`，添加以下依赖 +- V2.10.10 + ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -153,6 +180,16 @@ export const ReactNativeExceptionHandler = () => { } ``` +- V2.10.11 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + + "@react-native-ohos/react-native-exception-handler": "file:../../node_modules/@react-native-ohos/react-native-exception-handler/harmony/exception_handler.har", + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -188,7 +225,14 @@ add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: manual_package_linking_1 add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + +# V2.10.10 + + add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-exception-handler/src/main/cpp" ./exception-handler) + +# V2.10.11 + ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-exception-handler/src/main/cpp" ./exception-handler) # RNOH_END: manual_package_linking_1 file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") @@ -226,7 +270,7 @@ std::vector> PackageProvider::getPackages(Package::Cont ### 4.在 ArkTs 侧引入 ExceptionHandlerPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： - +- V2.10.10 ```diff ... + import {ExceptionHandlerPackage} from '@react-native-oh-tpl/react-native-exception-handler/ts'; @@ -238,7 +282,18 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { ]; } ``` +- V2.10.11 +```diff + ... ++ import {ExceptionHandlerPackage} from '@react-native-ohos/react-native-exception-handler/ts'; +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new ExceptionHandlerPackage(ctx) + ]; +} +``` ### 5.运行 点击右上角的 `sync` 按钮 @@ -257,8 +312,13 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/reace-native-exception-handler Releases](https://github.com/react-native-oh-library/react-native-exception-handler/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.10.10 | [@react-native-oh-tpl/react-native-exception-handler Releases](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | 0.72 | +| 2.10.11 | [@react-native-ohos/react-native-exception-handler Releases]() | 0.77 | +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 ## 静态方法 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 diff --git a/zh-cn/react-native-file-selector.md b/zh-cn/react-native-file-selector.md index fdabdd00..8fa29501 100644 --- a/zh-cn/react-native-file-selector.md +++ b/zh-cn/react-native-file-selector.md @@ -17,7 +17,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-file-selector Releases](https://github.com/react-native-oh-library/react-native-file-selector/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.0.2 | [@react-native-oh-tpl/react-native-file-selector Releases](https://github.com/react-native-oh-library/react-native-file-selector/releases) | 0.72 | +| 1.0.3 | [@react-native-ohos/react-native-file-selector Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -25,13 +32,19 @@ #### **npm** ```bash +# 1.0.2 npm install @react-native-oh-tpl/react-native-file-selector +# 1.0.3 +npm install @react-native-ohos/react-native-file-selector ``` #### **yarn** ```bash +# 1.0.2 yarn add @react-native-oh-tpl/react-native-file-selector +# 1.0.3 +yarn add @react-native-ohos/react-native-file-selector ``` @@ -55,6 +68,8 @@ export default App; ## 使用 Codegen +> [!TIP] V1.0.3 不需要执行 Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link @@ -86,7 +101,7 @@ export default App; > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 打开 `entry/oh-package.json5`，添加以下依赖 - +- V1.0.2 ```json "dependencies": { "@rnoh/react-native-openharmony" : "file:../react_native_openharmony", @@ -94,6 +109,14 @@ export default App; } ``` +- V1.0.3 +```json +"dependencies": { + "@rnoh/react-native-openharmony" : "file:../react_native_openharmony", + "@react-native-ohos/react-native-file-selector": "file:../../node_modules/@react-native-ohos/react-native-file-selector/harmony/file_selector.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -115,7 +138,10 @@ ohpm install ```diff ... import type {RNPackageContext, RNPackage} from '@rnoh/react-native-openharmony/ts'; +// V1.0.2 +import {RNFileSelectorPackage} from '@react-native-oh-tpl/react-native-file-selector/ts'; +// V1.0.3 ++import {RNFileSelectorPackage} from '@react-native-ohos/react-native-file-selector/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { @@ -125,7 +151,70 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4.配置 CMakeLists 和引入 SqliteStoragePackage + +> [!TIP] V1.0.3 需要执行 + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-file-selector/src/main/cpp" ./file-selector) + + +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_file_selector) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "FileSelectorPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 5.运行 点击右上角的 `sync` 按钮 @@ -144,7 +233,12 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-file-selector Releases](https://github.com/react-native-oh-library/react-native-file-selector/releases) +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.0.2 | [@react-native-oh-tpl/react-native-file-selector Releases](https://github.com/react-native-oh-library/react-native-file-selector/releases) | 0.72 | +| 1.0.3 | [@react-native-ohos/react-native-file-selector Releases]() | 0.77 | ## 属性 diff --git a/zh-cn/react-native-image-zoom-viewer.md b/zh-cn/react-native-image-zoom-viewer.md index 4f629fce..7cac767a 100644 --- a/zh-cn/react-native-image-zoom-viewer.md +++ b/zh-cn/react-native-image-zoom-viewer.md @@ -19,7 +19,13 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-image-zoom-viewer Releases](https://github.com/react-native-oh-library/react-native-image-viewer/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 3.0.1 | [@react-native-oh-tpl/react-native-image-zoom-viewer Releases](https://github.com/react-native-oh-library/react-native-image-viewer/releases) | 0.72 | +| 3.0.2 | [@react-native-ohos/react-native-image-zoom-viewer Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -28,13 +34,21 @@ #### npm ```bash +# V3.0.1 npm install @react-native-oh-tpl/react-native-image-zoom-viewer + +# V3.0.2 +npm install @react-native-ohos/react-native-image-zoom-viewer ``` #### yarn ```bash +# V3.0.1 yarn add @react-native-oh-tpl/react-native-image-zoom-viewer + +# V3.0.2 +yarn add @react-native-ohos/react-native-image-zoom-viewer ``` @@ -226,7 +240,13 @@ export default ReactImageZoon; 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-zoom-viewer Releases](https://github.com/react-native-oh-library/react-native-image-viewer/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 3.0.1 | [@react-native-oh-tpl/react-native-image-zoom-viewer Releases](https://github.com/react-native-oh-library/react-native-image-viewer/releases) | 0.72 | +| 3.0.2 | [@react-native-ohos/react-native-image-zoom-viewer Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 ## 属性 diff --git a/zh-cn/react-native-swiper.md b/zh-cn/react-native-swiper.md index a1efaa52..2d877ef0 100644 --- a/zh-cn/react-native-swiper.md +++ b/zh-cn/react-native-swiper.md @@ -14,6 +14,19 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-swiper) + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.6.0 | [@react-native-oh-tpl/react-native-swiper Releases](https://github.com/react-native-oh-library/react-native-swiper/releases) | 0.72 | +| 1.6.1 | [@react-native-ohos/react-native-swiper]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 + +进入到工程目录并输入以下命令： + + + ## 安装与使用 @@ -21,13 +34,21 @@ #### **npm** ```bash +# V1.6.0 npm i @react-native-oh-tpl/react-native-swiper --save + +# V1.6.1 +npm i @react-native-ohos/react-native-swiper --save ``` #### **yarn** ```bash +# V1.6.0 yarn add @react-native-oh-tpl/react-native-swiper + +# V1.6.1 +yarn add @react-native-ohos/react-native-swiper ``` @@ -92,10 +113,15 @@ AppRegistry.registerComponent("myproject", () => SwiperComponent); ### 兼容性 -在以下版本验证通过 -1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; -2. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71; +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 1.6.0 | [@react-native-oh-tpl/react-native-swiper Releases](https://github.com/react-native-oh-library/react-native-swiper/releases) | 0.72 | +| 1.6.1 | [@react-native-ohos/react-native-swiper]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 + ## 属性 diff --git a/zh-cn/react-native-touch-id.md b/zh-cn/react-native-touch-id.md index aaf10212..069e9f2e 100644 --- a/zh-cn/react-native-touch-id.md +++ b/zh-cn/react-native-touch-id.md @@ -16,8 +16,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-touch-id Releases](https://github.com/react-native-oh-library/react-native-touch-id/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.4.1 | [@react-native-oh-tpl/react-native-touch-id Releases](https://github.com/react-native-oh-library/react-native-touch-id/releases) | 0.72 | +| 4.4.2 | [@react-native-ohos/react-native-touch-id Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-touch-id) | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -26,13 +32,19 @@ #### **npm** ```bash +# 4.4.1 npm install @react-native-oh-tpl/react-native-touch-id +# 4.4.2 +npm install @react-native-ohos/react-native-touch-id ``` #### **yarn** ```bash +# 4.4.1 yarn add @react-native-oh-tpl/react-native-touch-id +# 4.4.2 +yarn add @react-native-ohos/react-native-touch-id ``` @@ -78,6 +90,8 @@ export default App; ``` ## 使用 Codegen +> [!TIP] V4.4.1 不需要执行 Codegen。 + 本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/codegen.md)。 ## Link @@ -108,7 +122,7 @@ export default App; > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 打开 `entry/oh-package.json5`，添加以下依赖 - +- V4.4.1 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -116,6 +130,14 @@ export default App; } ``` +- V4.4.2 +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/react-native-touch-id": "file:../../node_modules/@react-native-ohos/react-native-touch-id/harmony/touch_id.har" + } +``` + 点击右上角的 `sync` 按钮 或者在终端执行： @@ -136,7 +158,10 @@ ohpm install ```diff ... + // 4.4.1 + import { TouchIdPackage } from "@react-native-oh-tpl/react-native-touch-id/ts"; + // 4.4.2 ++ import { TouchIdPackage } from "@react-native-ohos/react-native-touch-id/ts"; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -146,7 +171,69 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4.配置 CMakeLists 和引入 TouchIdPackage + +> [!TIP] V4.4.2 需要执行 + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-touch-id/src/main/cpp" ./touch-id) + +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_touch_id) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "TouchIdPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 5.运行 点击右上角的 `sync` 按钮 @@ -166,7 +253,14 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-touch-id Releases](https://github.com/react-native-oh-library/react-native-touch-id/releases) +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 4.4.1 | [@react-native-oh-tpl/react-native-touch-id Releases](https://github.com/react-native-oh-library/react-native-touch-id/releases) | 0.72 | +| 4.4.2 | [@react-native-ohos/react-native-touch-id Releases](https://gitcode.com/openharmony-sig/rntpc_react-native-touch-id) | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 ### 权限要求 diff --git a/zh-cn/react-native-video-cache.md b/zh-cn/react-native-video-cache.md index e4302e33..4918d991 100644 --- a/zh-cn/react-native-video-cache.md +++ b/zh-cn/react-native-video-cache.md @@ -21,7 +21,14 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-video-cache Releases](https://github.com/react-native-oh-library/react-native-video-cache/releases) 。对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.7.4 | [@react-native-oh-tpl/react-native-video-cache Releases](https://github.com/react-native-oh-library/react-native-video-cache/releases) | 0.72 | +| 2.7.5 | [@react-native-ohos/react-native-video-cache Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -32,13 +39,19 @@ #### npm ```bash +# 2.7.4 npm install @react-native-oh-tpl/react-native-video-cache +# 2.7.5 +npm install @react-native-ohos/react-native-video-cache ``` #### yarn ```bash +# 2.7.4 yarn add @react-native-oh-tpl/react-native-video-cache +# 2.7.5 +yarn add @react-native-ohos/react-native-video-cache ``` @@ -119,13 +132,20 @@ const styles = StyleSheet.create({ > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 打开 `entry/oh-package.json5`，添加以下依赖 - +- V2.7.4 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", "@react-native-oh-tpl/rnoh-video-cache": "file:../../node_modules/@react-native-oh-tpl/react-native-video-cache/harmony/react_native_video_cache.har" } ``` +- V2.7.5 +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/rnoh-video-cache": "file:../../node_modules/@react-native-ohos/react-native-video-cache/harmony/react_native_video_cache.har" + } +``` 点击右上角的 `sync` 按钮 @@ -142,6 +162,7 @@ ohpm install 打开 `entry/oh-package.json5`，添加以下依赖 +- V2.7.4 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", @@ -149,6 +170,14 @@ ohpm install } ``` +- V2.7.5 +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-ohos/rnoh-video-cache": "file:../../node_modules/@react-native-ohos/react-native-video-cache/harmony/react_native_video_cache" + } +``` + 打开终端，执行： ```bash @@ -162,7 +191,10 @@ ohpm install --no-link ```diff ... + // V2.7.4 + import { RNVideoCachePackage } from '@react-native-oh-tpl/rnoh-video-cache/ts'; + // V2.7.5 ++ import { RNVideoCachePackage } from '@react-native-ohos/rnoh-video-cache/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ @@ -172,7 +204,69 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] { } ``` -### 4.运行 +### 4.配置 CMakeLists 和引入 VideoCachePackage + +> [!TIP] V2.7.5 需要执行 + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-ohos/rnoh-video-cache/src/main/cpp" ./video-cache) + +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_react_native_video_cache) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "VideoCachePackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 5.运行 点击右上角的 `sync` 按钮 @@ -191,7 +285,14 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-video-cache Releases](https://github.com/react-native-oh-library/react-native-video-cache/releases)。 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 发布信息 | 支持RN版本 | +| ---------- | ------------------------------------------------------------ | ---------- | +| 2.7.4 | [@react-native-oh-tpl/react-native-video-cache Releases](https://github.com/react-native-oh-library/react-native-video-cache/releases) | 0.72 | +| 2.7.5 | [@react-native-ohos/react-native-video-cache Releases]() | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 本文档内容基于以下版本验证通过： 1. RNOH: 0.72.20-CAPI; SDK: HarmonyOS NEXT Developer Beta1(full sdk); IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18; -- Gitee