From 198882da235f60f97e95ff6676c5e707c096b44b Mon Sep 17 00:00:00 2001 From: Louis-C7 Date: Thu, 1 Feb 2024 17:31:46 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I90CZ5]=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E6=96=87=E6=A1=A3=E5=88=B00130=E7=89=88=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-navigation-stack.md | 70 ------- 1224/react-navigation.md | 33 ---- 1224/recyclerListView.md | 236 ----------------------- 1224/rn-placeholder.md | 127 ------------ 1224/rn-section-list-get-item-layout.md | 91 --------- zh-cn/react-navigation-stack.md | 41 ++-- zh-cn/react-navigation.md | 28 +-- zh-cn/recyclerListView.md | 12 +- zh-cn/rn-placeholder.md | 60 +++--- zh-cn/rn-section-list-get-item-layout.md | 44 ++--- 10 files changed, 94 insertions(+), 648 deletions(-) delete mode 100644 1224/react-navigation-stack.md delete mode 100644 1224/react-navigation.md delete mode 100644 1224/recyclerListView.md delete mode 100644 1224/rn-placeholder.md delete mode 100644 1224/rn-section-list-get-item-layout.md diff --git a/1224/react-navigation-stack.md b/1224/react-navigation-stack.md deleted file mode 100644 index e62069b9..00000000 --- a/1224/react-navigation-stack.md +++ /dev/null @@ -1,70 +0,0 @@ -> 模板版本：v0.1.2 - -

-

@react-navigation/stack

-

-

- - Supported platforms - - - License - -

- -## 安装与使用 - -进入到工程目录并输入以下命令： - - - -```bash -yarn add @react-navigation/stack@6.3.19 -``` - -#### **npm** - -```bash -npm install @react-navigation/stack@6.3.19 -``` - - - -## 兼容性 - -在下述版本验证通过： - -1. DevEco Studio: 4.0.3.700; SDK: OpenHarmony(API10) 4.0.10.15; 测试设备: Mate 40 Pro(NOH-AN00); ROM: 4.0.0.66(SP3C00E73R1P14log); RNOH: 0.72.10 -2. DevEco Studio: 4.1.3.313; SDK: OpenHarmony(API11) 4.1.0.52; 测试设备: Mate 40 Pro(NOH-AN00); ROM: 2.0.0.51(SP22C00E52R1P17log); RNOH: 0.72.11 -3. DevEco Studio: 4.1.3.313; SDK: OpenHarmony(API11) 4.1.0.52; 测试设备: Mate 40 Pro(NOH-AN00); ROM: 2.0.0.52(SP22C00E52R1P17log); RNOH: 0.72.11 - -## 方法 - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---------------------- | --------------- | -------- | -------- | -------- | ----------------- | -| `createStackNavigator` | 创建 Stack 组件 | function | no | All | yes | - -## 属性 - -以下属性已验证，更多属性详情请查看 [react-navigation/stack 的文档介绍](https://reactnavigation.org/docs/stack-navigator) - -**Navigator**： - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---------------- | ------------------------------------ | ------ | -------- | -------- | ----------------- | -| initialRouteName | 第一次加载导航器时要渲染的路线的名称 | string | no | All | yes | - -**Screen**： - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------- | -------------------------------------- | ---------- | -------- | -------- | ----------------- | -| name | 屏幕显示的 自定义类型名称 | string | no | All | yes | -| options | 用于配置如何在导航器中显示屏幕的选项。 | 自定义类型 | no | All | yes | - -## 遗留问题 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/stack/LICENSE) ，请自由地享受和参与开源。 diff --git a/1224/react-navigation.md b/1224/react-navigation.md deleted file mode 100644 index 9d0555d2..00000000 --- a/1224/react-navigation.md +++ /dev/null @@ -1,33 +0,0 @@ -> 模板版本：v0.1.2 - -

-

react-navigation

-

-

- - Supported platforms - - - License - -

- -## Package Versions - -| Name | Latest Version | -| ------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------: | -| [@react-navigation/bottom-tabs](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/bottom-tabs.svg)](https://www.npmjs.com/package/@react-navigation/bottom-tabs) | -| [@react-navigation/core](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/core.svg)](https://www.npmjs.com/package/@react-navigation/core) | -| [@react-navigation/devtools](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/devtools.svg)](https://www.npmjs.com/package/@react-navigation/devtools) | -| [@react-navigation/drawer](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/drawer.svg)](https://www.npmjs.com/package/@react-navigation/drawer) | -| [@react-navigation/elements](./react-navigation-elements.md) | [![badge](https://img.shields.io/npm/v/@react-navigation/elements.svg)](https://www.npmjs.com/package/@react-navigation/elements) | -| [@react-navigation/material-top-tabs](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/material-top-tabs.svg)](https://www.npmjs.com/package/@react-navigation/material-top-tabs) | -| [@react-navigation/native-stack](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/native-stack.svg)](https://www.npmjs.com/package/@react-navigation/native-stack) | -| [@react-navigation/native](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/native.svg)](https://www.npmjs.com/package/@react-navigation/native) | -| [@react-navigation/routers](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/routers.svg)](https://www.npmjs.com/package/@react-navigation/routers) | -| [@react-navigation/stack](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/stack.svg)](https://www.npmjs.com/package/@react-navigation/stack) | -| [react-native-tab-view](./#) | [![badge](https://img.shields.io/npm/v/react-native-tab-view.svg)](https://www.npmjs.com/package/react-native-tab-view) | - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/a7ul/react-native-exception-handler/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/1224/recyclerListView.md b/1224/recyclerListView.md deleted file mode 100644 index 82a4cb67..00000000 --- a/1224/recyclerListView.md +++ /dev/null @@ -1,236 +0,0 @@ -> 模板版本：v0.1.2 - -

-

RecyclerListView

-

-

- - Supported platforms - - - License - -

- -> [!tip] [Github 地址](https://github.com/Flipkart/recyclerlistview) - -## 安装与使用 - -进入到工程目录并输入以下命令： - - - -#### **yarn** - -```bash -yarn add recyclerlistview -``` - -#### **npm** - -```bash -npm install recyclerlistview -``` - - - -下面的代码展示了这个库的基本使用场景： - -```js -import React, { Component } from "react"; -import { View, Text, Dimensions } from "react-native"; -import { - RecyclerListView, - DataProvider, - LayoutProvider, -} from "recyclerlistview"; - -const ViewTypes = { - FULL: 0, - HALF_LEFT: 1, - HALF_RIGHT: 2, -}; - -let containerCount = 0; - -class CellContainer extends React.Component { - constructor(args) { - super(args); - this._containerId = containerCount++; - } - render() { - return ( - - {this.props.children} - Cell Id: {this._containerId} - - ); - } -} - -export default class RecycleTestComponent extends React.Component { - constructor(args) { - super(args); - - let { width } = Dimensions.get("window"); - - let dataProvider = new DataProvider((r1, r2) => { - return r1 !== r2; - }); - - this._layoutProvider = new LayoutProvider( - (index) => { - if (index % 3 === 0) { - return ViewTypes.FULL; - } else if (index % 3 === 1) { - return ViewTypes.HALF_LEFT; - } else { - return ViewTypes.HALF_RIGHT; - } - }, - (type, dim) => { - switch (type) { - case ViewTypes.HALF_LEFT: - dim.width = width / 2; - dim.height = 160; - break; - case ViewTypes.HALF_RIGHT: - dim.width = width / 2; - dim.height = 160; - break; - case ViewTypes.FULL: - dim.width = width; - dim.height = 140; - break; - default: - dim.width = 0; - dim.height = 0; - } - } - ); - - this._rowRenderer = this._rowRenderer.bind(this); - - this.state = { - dataProvider: dataProvider.cloneWithRows(this._generateArray(300)), - }; - } - - _generateArray(n) { - let arr = new Array(n); - for (let i = 0; i < n; i++) { - arr[i] = i; - } - return arr; - } - - _rowRenderer(type, data) { - switch (type) { - case ViewTypes.HALF_LEFT: - return ( - - Data: {data} - - ); - case ViewTypes.HALF_RIGHT: - return ( - - Data: {data} - - ); - case ViewTypes.FULL: - return ( - - Data: {data} - - ); - default: - return null; - } - } - - render() { - return ( - - ); - } -} -const styles = { - container: { - justifyContent: "space-around", - alignItems: "center", - flex: 1, - backgroundColor: "#00a1f1", - }, - containerGridLeft: { - justifyContent: "space-around", - alignItems: "center", - flex: 1, - backgroundColor: "#ffbb00", - }, - containerGridRight: { - justifyContent: "space-around", - alignItems: "center", - flex: 1, - backgroundColor: "#7cbb00", - }, -}; -``` - -## 约束与限制 - -### 兼容性 - -在下述版本验证通过: - -1. IDE: Deveco Studio 4.1.3.412;SDK: OpenHarmony (Api11) 4.1.0.53;测试设备: Mate40 Pro (NOH-AN00);ROM: 2.0.0.52(SP22C00E52R1P17log);RNOH: 0.72.11; - -## 属性 - -详情见 [RecyclerListView 源库地址](https://github.com/Flipkart/recyclerlistview) - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | -------- | -------- | ----------------- | -| layoutProvider | Constructor function that defines the layout (height / width) of each element | BaseLayoutProvider | Yes | All | Yes | -| dataProvider | Constructor function the defines the data for each element | DataProvider | Yes | All | Yes | -| contextProvider | Used to maintain scroll position in case view gets destroyed, which often happens with back navigation | ContextProvider | No | All | No | -| rowRenderer | Method that returns react component to be rendered. You get the type, data, index and extendedState of the view in the callback | (type: string \| number, data: any, index: number) => JSX.Element \| JSX.Element[] \| null | Yes | All | Yes | -| initialOffset | Initial offset you want to start rendering from; This is very useful if you want to maintain scroll context across pages. | number | No | All | Yes | -| renderAheadOffset | specify how many pixels in advance you want views to be rendered. Increasing this value can help reduce blanks (if any). However, keeping this as low as possible should be the intent. Higher values also increase re-render compute | number | No | All | Yes | -| isHorizontal | If true, the list will operate horizontally rather than vertically | boolean | No | All | Yes | -| onScroll | On scroll callback function that executes as a user scrolls | rawEvent: ScrollEvent, offsetX: number, offsetY: number) => void | No | All | Yes | -| onRecreate | callback function that gets executed when recreating the recycler view from context provider | (params: OnRecreateParams) => void | No | All | No | -| externalScrollView | Use this to pass your on implementation of BaseScrollView | { new (props: ScrollViewDefaultProps): BaseScrollView } | No | All | No | -| onEndReached | Callback function executed when the end of the view is hit (minus onEndThreshold if defined) | () => void | No | All | Yes | -| onEndReachedThreshold | Specify how many pixels in advance for the onEndReached callback | number | No | All | Yes | -| onEndReachedThresholdRelative | Specify how far from the end (in units of visible length of the list) the bottom edge of the list must be from the end of the content to trigger the onEndReached callback | number | No | All | Yes | -| onVisibleIndicesChanged | Provides visible index; helpful in sending impression events | TOnItemStatusChanged | No | All | Yes | -| onVisibleIndexesChanged | (Deprecated in 2.0 beta) Provides visible index; helpful in sending impression events | TOnItemStatusChanged | No | All | No | -| renderFooter | Provide this method if you want to render a footer. Helpful in showing a loader while doing incremental loads | () => JSX.Element \| JSX.Element[] \| null | No | All | Yes | -| initialRenderIndex | Specify the initial item index you want rendering to start from. Preferred over initialOffset if both specified | number | No | All | yes | -| scrollThrottle | iOS only; Scroll throttle duration | number | No | All | No | -| canChangeSize | Specify if size can change | boolean | No | All | No | -| distanceFromWindow | (Depricated) Use applyWindowCorrection() API with windowShift. | number | No | All | No | -| applyWindowCorrection | (Enhancement/replacement to distanceFromWindow API) Allows updation of the visible windowBounds to based on correctional values passed. User can specify windowShift; in case entire RecyclerListWindow needs to shift down/up, startCorrection; in case when top window bound needs to be shifted for e.x. top window bound to be shifted down is a content overlapping the top edge of RecyclerListView, endCorrection: to alter bottom window bound for a similar use-case. | (offset: number, windowCorrection: WindowCorrection) => void | No | All | Yes | -| useWindowScroll | Web only; Layout Elements in window instead of a scrollable div | boolean | No | All | No | -| disableRecycling | Turns off recycling | boolean | No | All | Yes | -| forceNonDeterministicRendering | Default is false; if enabled dimensions provided in layout provider will not be strictly enforced. Use this if item dimensions cannot be accurately determined | boolean | No | All | Yes | -| extendedState | In some cases the data passed at row level may not contain all the info that the item depends upon, you can keep all other info outside and pass it down via this prop. Changing this object will cause everything to re-render. Make sure you don't change it often to ensure performance. Re-renders are heavy. | object | No | All | No | -| itemAnimator | Enables animating RecyclerListView item cells (shift, add, remove, etc) | ItemAnimator | No | All | No | -| style | To pass down style to inner ScrollView | object | No | All | Yes | -| scrollViewProps | For all props that need to be proxied to inner/external scrollview. Put them in an object and they'll be spread and passed down. | object | No | All | Yes | -| layoutSize | Will prevent the initial empty render required to compute the size of the listview and use these dimensions to render list items in the first render itself. This is useful for cases such as server side rendering. The prop canChangeSize has to be set to true if the size can be changed after rendering. Note that this is not the scroll view size and is used solely for layouting. | Dimension | No | All | Yes | -| onItemLayout | A callback function that is executed when an item of the recyclerListView (at an index) has been layout. This can also be used as a proxy to itemsRendered kind of callbacks. | number | No | All | Yes | -| windowCorrectionConfig | Used to specify is window correction config and whether it should be applied to some scroll events | object | No | All | Yes | - -## 遗留问题 - -## 其他 - -## 开源协议 - -本项目基于 [Apache License 2.0](https://github.com/Flipkart/recyclerlistview/blob/master/LICENSE.md) ，请自由地享受和参与开源。 diff --git a/1224/rn-placeholder.md b/1224/rn-placeholder.md deleted file mode 100644 index 11b2ef49..00000000 --- a/1224/rn-placeholder.md +++ /dev/null @@ -1,127 +0,0 @@ -> 模板版本：v0.1.2 - -

-

rn-placeholder

-

-

- - Supported platforms - - - License - -

- -> [!tip] [Github 地址](https://github.com/mfrachet/rn-placeholder) - -## 安装与使用 - -> [!tip] 因原作者未发布最新的组件版本到 npm 仓，如果 package.json 中 peerDependencies 依赖 react 版本与项目 react 版本不一致会产生依赖冲突。npm 安装需要引入--legacy-peer-deps 标志绕过 peerDependencies 自动安装 - -进入到工程目录并输入以下命令： - - - -#### **yarn** - -```bash -yarn add rn-placeholder@3.0.3 -``` - -#### **npm** - -```bash -npm install rn-placeholder@3.0.3 -``` - -下面的代码展示了这个库的基本使用场景： - -```js -import { - Placeholder, - PlaceholderMedia, - PlaceholderLine, - Fade, -} from "rn-placeholder"; - -const App = () => ( - - - - - -); -``` - -## 约束与限制 - -### 兼容性 - -在下述版本验证通过: - -1. IDE: Deveco Studio 4.1.3.412;SDK: OpenHarmony (Api11) 4.1.0.53;测试设备: Mate40 Pro (NOH-AN00);ROM: 2.0.0.52(SP22C00E52R1P17log);RNOH: 0.72.11; - -## 属性 - -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -详情见 [rn-placeholder 源库地址](https://github.com/mfrachet/rn-placeholder) - -**组件 Placeholder** - -It's the wrapper around all of the other components. Using alone will not produce anything interesting. You have put some line or media inside to make it powerful.It accepts all the props of a React Native View plus: - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------- | --------------------------------------------------- | ------------- | -------- | -------- | ----------------- | -| Animation | An optional component that animates the placeholder | Animations | no | All | Yes | -| Left | An optional component to display on the left | ComponentType | no | All | Yes | -| Right | An optional component to display on the right | ComponentType | no | All | Yes | - -**_Animations_** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------- | -------------------------------------------------- | ------------- | -------- | -------- | -------- | -| Fade | This is the base animation that makes the placeholder become clearer on a specified interval| ComponentType | no | All | Yes | -| ShineOverlay | This applies a tiny overlay from left to right of the placeholder. It's pretty neat but it has the drawback to only work without style customization: only on white background with gray lines |ComponentType| no | All | Yes | -| Shine | The shine animation is an attempt to overcome the overlay problem of the ShineOverlay animation by animating only the differnt part of the placeholder | ComponentType | no | All | Yes | -| Loader | A simple placeholder animation based on the standard loader (ActivityIndicator) of each platforms | ComponentType | no | All | Yes | -| Progressive | I'm feel a bit guilty about that but I've stolen the idea from a design system and I can't remember which one. But I like the way it behaves | ComponentType | no | All | Yes | -| Tweaking existing animations | It's possible to tweak a specific animation by passing it additional props. However keep in mind that it's important to spread the props from the Animation render function. Else you will be in strange behaviors| ComponentType | no | All | Yes | - -**组件 PlaceholderLine** - -A PlaceholderLine is one of the two basic and visual components of a placeholder. - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| -------- | ---------------------------------------------------------------------- | ------- | -------- | -------- | ----------------- | -| height | The line height, default is 12 | number | no | All | Yes | -| color | The line color, default is #efefef | string | no | All | Yes | -| width | The line width in percent, default is 100(%) | number | no | All | Yes | -| noMargin | Defines if a line should have a margin bottom or not, default is false | boolean | no | All | Yes | -| style | Customize the style of the underlying View component | object | no | All | Yes | - -**组件 PlaceholderMedia** - -A PlaceholderMedia is the second of the two basic and visual components of a placeholder. It can be used a single placeholder like following: - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------- | -------------------------------------------------------- | ------- | -------- | -------- | ----------------- | -| size | The media size (height / width), default is 40 | number | no | All | Yes | -| isRound | Defines if the media is rounded or not, default is false | boolean | no | All | Yes | -| color | The media color, default is #efefef | string | no | All | Yes | -| style | Customize the style of the underlying View component | object | no | All | Yes | - -## 遗留问题 - -- [ ] package.json 中 peerDependencies 依赖 react 版本与项目 react 版本不一致会产生依赖冲突，此问题只会导致 npm 安装依赖报错，不对组件功能造成影响。源库此问题 issues: [issue#226](https://github.com/mfrachet/rn-placeholder/issues/226) - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/mfrachet/rn-placeholder/blob/master/LICENSE.md) ，请自由地享受和参与开源。 diff --git a/1224/rn-section-list-get-item-layout.md b/1224/rn-section-list-get-item-layout.md deleted file mode 100644 index 519ae119..00000000 --- a/1224/rn-section-list-get-item-layout.md +++ /dev/null @@ -1,91 +0,0 @@ -> 模板版本：v0.1.2 - -

-

rn-section-list-get-item-layout

-

-

- - Supported platforms - - - License - -

- -> [!tip] [Github 地址](https://github.com/jsoendermann/rn-section-list-get-item-layout) - -## 安装与使用 - -进入到工程目录并输入以下命令： - - - -#### **yarn** - -```bash -yarn add react-native-section-list-get-item-layout@^2.2.3 -``` - -#### **npm** - -```bash -npm install react-native-section-list-get-item-layout@^2.2.3 -``` - - - -下面的代码展示了这个库的基本使用场景： - -```js -import sectionListGetItemLayout from "react-native-section-list-get-item-layout"; - -class MyComponent extends React.Component { - constructor(props) { - super(props); - - this.getItemLayout = sectionListGetItemLayout({ - // The height of the row with rowData at the given sectionIndex and rowIndex - getItemHeight: (rowData, sectionIndex, rowIndex) => - sectionIndex === 0 ? 100 : 50, - - // These four properties are optional - getSeparatorHeight: () => 1 / PixelRatio.get(), // The height of your separators - getSectionHeaderHeight: () => 20, // The height of your section headers - getSectionFooterHeight: () => 10, // The height of your section footers - listHeaderHeight: 40, // The height of your list header - }); - } - - render() { - return ; - } -} -``` - -## 约束与限制 - -### 兼容性 - -在下述版本验证通过： - -1. IDE：DevEco Studio 4.1.3.313;SDK：OpenHarmony(api11) 4.1.0.52;测试设备：Mate40 Pro(NOH-AN00);ROM：2.0.0.52(C00E52R1P17log);RNOH：0.72.11 - -## API - -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -详情见 [rn-section-list-get-item-layout 源库地址](https://github.com/jsoendermann/rn-section-list-get-item-layout) - -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | -------- | -| sectionListGetItemLayout({getItemHeight, getSeparatorHeight, getSectionHeaderHeight,getSectionFooterHeight,listHeaderHeight}) | This package provides a function that helps you construct the getItemLayout function for your SectionLists. For an explanation of why this exists, see this post. It's meant to be used like this | function | Yes | All | Yes | - -## 遗留问题 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/jsoendermann/rn-section-list-get-item-layout/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/zh-cn/react-navigation-stack.md b/zh-cn/react-navigation-stack.md index 8ea49a28..744626c4 100644 --- a/zh-cn/react-navigation-stack.md +++ b/zh-cn/react-navigation-stack.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.1.3

@react-navigation/stack

@@ -18,35 +18,32 @@ -```bash -yarn add @react-navigation/stack@6.3.19 -``` - #### **npm** ```bash npm install @react-navigation/stack@6.3.19 ``` -正常使用`stack`还需导入相关依赖，点击查看详细使用方法 -[@react-native-oh-tpl/elements](./react-navigation-elements.md)
-[@react-native-oh-tpl/react-native-safe-area-context](./react-native-safe-area-context.md)
-[@react-native-oh-tpl/react-native-gesture-handler](./react-native-gesture-handler.md) +#### **yarn** + +```bash +yarn add @react-navigation/stack@6.3.19 +``` + ## 兼容性 -在下述版本验证通过： +本文档内容基于以下版本验证通过： 1. DevEco Studio: 4.0.3.700; SDK: OpenHarmony(API10) 4.0.10.15; 测试设备: Mate 40 Pro(NOH-AN00); ROM: 4.0.0.66(SP3C00E73R1P14log); RNOH: 0.72.10 -2. DevEco Studio: 4.1.3.313; SDK: OpenHarmony(API11) 4.1.0.52; 测试设备: Mate 40 Pro(NOH-AN00); ROM: 2.0.0.51(SP22C00E52R1P17log); RNOH: 0.72.11 -3. DevEco Studio: 4.1.3.313; SDK: OpenHarmony(API11) 4.1.0.52; 测试设备: Mate 40 Pro(NOH-AN00); ROM: 2.0.0.52(SP22C00E52R1P17log); RNOH: 0.72.11 +2. DevEco Studio: 4.1.3.313; SDK: OpenHarmony(API11) 4.1.0.52; 测试设备: Mate 40 Pro(NOH-AN00); ROM: 2.0.0.52(SP22C00E52R1P17log); RNOH: 0.72.11 ## 方法 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| `createStackNavigator` | 创建Stack组件 | function | no | All | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------- | --------------- | -------- | -------- | -------- | ----------------- | +| `createStackNavigator` | 创建 Stack 组件 | function | no | All | yes | ## 属性 @@ -54,16 +51,16 @@ npm install @react-navigation/stack@6.3.19 **Navigator**： -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| initialRouteName | 第一次加载导航器时要渲染的路线的名称 | string | no | All | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ------------------------------------ | ------ | -------- | -------- | ----------------- | +| initialRouteName | 第一次加载导航器时要渲染的路线的名称 | string | no | All | yes | **Screen**： -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | ----------- | ---- | -------- | -------- | ------------------ | -| name | 屏幕显示的 自定义类型名称 | string | no | All | yes | -| options | 用于配置如何在导航器中显示屏幕的选项。| 自定义类型 | no | All | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------- | -------------------------------------- | ---------- | -------- | -------- | ----------------- | +| name | 屏幕显示的 自定义类型名称 | string | no | All | yes | +| options | 用于配置如何在导航器中显示屏幕的选项。 | 自定义类型 | no | All | yes | ## 遗留问题 diff --git a/zh-cn/react-navigation.md b/zh-cn/react-navigation.md index 55a6d15a..4efa4c21 100644 --- a/zh-cn/react-navigation.md +++ b/zh-cn/react-navigation.md @@ -1,4 +1,4 @@ -> 模板版本：v0.0.1 +> 模板版本：v0.1.3

react-navigation

@@ -13,20 +13,20 @@

## Package Versions -|Name | Latest Version | -| ---------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------: | -| [@react-navigation/bottom-tabs](./react-navigation-bottom-tabs.md) | [![badge](https://img.shields.io/npm/v/@react-navigation/bottom-tabs.svg)](https://www.npmjs.com/package/@react-navigation/bottom-tabs) | -| [@react-navigation/core](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/core.svg)](https://www.npmjs.com/package/@react-navigation/core) | -| [@react-navigation/devtools](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/devtools.svg)](https://www.npmjs.com/package/@react-navigation/devtools) | -| [@react-navigation/drawer](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/drawer.svg)](https://www.npmjs.com/package/@react-navigation/drawer) | -| [@react-navigation/elements](./react-navigation-elements.md) | [![badge](https://img.shields.io/npm/v/@react-navigation/elements.svg)](https://www.npmjs.com/package/@react-navigation/elements) | -| [@react-navigation/material-top-tabs](./#) |[![badge](https://img.shields.io/npm/v/@react-navigation/material-top-tabs.svg)](https://www.npmjs.com/package/@react-navigation/material-top-tabs) | -| [@react-navigation/native-stack](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/native-stack.svg)](https://www.npmjs.com/package/@react-navigation/native-stack) | -| [@react-navigation/native](./react-navigation-native.md) | [![badge](https://img.shields.io/npm/v/@react-navigation/native.svg)](https://www.npmjs.com/package/@react-navigation/native) | -| [@react-navigation/routers](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/routers.svg)](https://www.npmjs.com/package/@react-navigation/routers) | -| [@react-navigation/stack](./react-navigation-stack.md) | [![badge](https://img.shields.io/npm/v/@react-navigation/stack.svg)](https://www.npmjs.com/package/@react-navigation/stack) | -| [react-native-tab-view](./#) | [![badge](https://img.shields.io/npm/v/react-native-tab-view.svg)](https://www.npmjs.com/package/react-native-tab-view) | +| Name | Latest Version | +| ------------------------------------------------------------ | :-------------------------------------------------------------------------------------------------------------------------------------------------: | +| [@react-navigation/bottom-tabs](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/bottom-tabs.svg)](https://www.npmjs.com/package/@react-navigation/bottom-tabs) | +| [@react-navigation/core](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/core.svg)](https://www.npmjs.com/package/@react-navigation/core) | +| [@react-navigation/devtools](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/devtools.svg)](https://www.npmjs.com/package/@react-navigation/devtools) | +| [@react-navigation/drawer](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/drawer.svg)](https://www.npmjs.com/package/@react-navigation/drawer) | +| [@react-navigation/elements](./react-navigation-elements.md) | [![badge](https://img.shields.io/npm/v/@react-navigation/elements.svg)](https://www.npmjs.com/package/@react-navigation/elements) | +| [@react-navigation/material-top-tabs](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/material-top-tabs.svg)](https://www.npmjs.com/package/@react-navigation/material-top-tabs) | +| [@react-navigation/native-stack](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/native-stack.svg)](https://www.npmjs.com/package/@react-navigation/native-stack) | +| [@react-navigation/native](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/native.svg)](https://www.npmjs.com/package/@react-navigation/native) | +| [@react-navigation/routers](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/routers.svg)](https://www.npmjs.com/package/@react-navigation/routers) | +| [@react-navigation/stack](./#) | [![badge](https://img.shields.io/npm/v/@react-navigation/stack.svg)](https://www.npmjs.com/package/@react-navigation/stack) | +| [react-native-tab-view](./#) | [![badge](https://img.shields.io/npm/v/react-native-tab-view.svg)](https://www.npmjs.com/package/react-native-tab-view) | ## 开源协议 diff --git a/zh-cn/recyclerListView.md b/zh-cn/recyclerListView.md index 82a4cb67..e497a203 100644 --- a/zh-cn/recyclerListView.md +++ b/zh-cn/recyclerListView.md @@ -20,16 +20,16 @@ -#### **yarn** +#### **npm** ```bash -yarn add recyclerlistview +npm install recyclerlistview ``` -#### **npm** +#### **yarn** ```bash -npm install recyclerlistview +yarn add recyclerlistview ``` @@ -185,9 +185,9 @@ const styles = { ### 兼容性 -在下述版本验证通过: +本文档内容基于以下版本验证通过： -1. IDE: Deveco Studio 4.1.3.412;SDK: OpenHarmony (Api11) 4.1.0.53;测试设备: Mate40 Pro (NOH-AN00);ROM: 2.0.0.52(SP22C00E52R1P17log);RNOH: 0.72.11; +1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52(SP22C00E52R1P17log); ## 属性 diff --git a/zh-cn/rn-placeholder.md b/zh-cn/rn-placeholder.md index fa41c40a..229292ee 100644 --- a/zh-cn/rn-placeholder.md +++ b/zh-cn/rn-placeholder.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.1.3

rn-placeholder

@@ -22,18 +22,20 @@ -#### **yarn** +#### **npm** ```bash -yarn add rn-placeholder +npm install rn-placeholder@3.0.3 ``` -#### **npm** +#### **yarn** ```bash -npm install rn-placeholder +yarn add rn-placeholder@3.0.3 ``` + + 下面的代码展示了这个库的基本使用场景： ```js @@ -61,26 +63,30 @@ const App = () => ( ### 兼容性 -在下述版本验证通过: +本文档内容基于以下版本验证通过： -1. IDE: Deveco Studio 4.1.3.412;SDK: OpenHarmony (Api11) 4.1.0.53;测试设备: Mate40 Pro (NOH-AN00);ROM: 2.0.0.52(SP22C00E52R1P17log);RNOH: 0.72.11; +1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52(SP22C00E52R1P17log); ## 属性 -详情见 [Placeholder 源库地址](https://github.com/mfrachet/rn-placeholder) +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +详情见 [rn-placeholder 源库地址](https://github.com/mfrachet/rn-placeholder) **组件 Placeholder** It's the wrapper around all of the other components. Using alone will not produce anything interesting. You have put some line or media inside to make it powerful.It accepts all the props of a React Native View plus: -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| --------- | --------------------------------------------------- | ------------- | -------- | -------- | -------- | -| Animation | An optional component that animates the placeholder | Animations | no | All | Yes | -| Left | An optional component to display on the left | ComponentType | no | All | Yes | -| Right | An optional component to display on the right | ComponentType | no | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------- | --------------------------------------------------- | ------------- | -------- | -------- | ----------------- | +| Animation | An optional component that animates the placeholder | Animations | no | All | Yes | +| Left | An optional component to display on the left | ComponentType | no | All | Yes | +| Right | An optional component to display on the right | ComponentType | no | All | Yes | **_Animations_** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| Name | Description | Type | Required | Platform | HarmonyOS Support | | --------- | -------------------------------------------------- | ------------- | -------- | -------- | -------- | | Fade | This is the base animation that makes the placeholder become clearer on a specified interval| ComponentType | no | All | Yes | | ShineOverlay | This applies a tiny overlay from left to right of the placeholder. It's pretty neat but it has the drawback to only work without style customization: only on white background with gray lines |ComponentType| no | All | Yes | @@ -93,24 +99,24 @@ It's the wrapper around all of the other components. Using alone will not produc A PlaceholderLine is one of the two basic and visual components of a placeholder. -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| -------- | ---------------------------------------------------------------------- | ------- | -------- | -------- | -------- | -| height | The line height, default is 12 | number | no | All | Yes | -| color | The line color, default is #efefef | string | no | All | Yes | -| width | The line width in percent, default is 100(%) | number | no | All | Yes | -| noMargin | Defines if a line should have a margin bottom or not, default is false | boolean | no | All | Yes | -| style | Customize the style of the underlying View component | object | no | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------- | ---------------------------------------------------------------------- | ------- | -------- | -------- | ----------------- | +| height | The line height, default is 12 | number | no | All | Yes | +| color | The line color, default is #efefef | string | no | All | Yes | +| width | The line width in percent, default is 100(%) | number | no | All | Yes | +| noMargin | Defines if a line should have a margin bottom or not, default is false | boolean | no | All | Yes | +| style | Customize the style of the underlying View component | object | no | All | Yes | **组件 PlaceholderMedia** A PlaceholderMedia is the second of the two basic and visual components of a placeholder. It can be used a single placeholder like following: -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------- | -------------------------------------------------------- | ------- | -------- | -------- | -------- | -| size | The media size (height / width), default is 40 | number | no | All | Yes | -| isRound | Defines if the media is rounded or not, default is false | boolean | no | All | Yes | -| color | The media color, default is #efefef | string | no | All | Yes | -| style | Customize the style of the underlying View component | object | no | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------- | -------------------------------------------------------- | ------- | -------- | -------- | ----------------- | +| size | The media size (height / width), default is 40 | number | no | All | Yes | +| isRound | Defines if the media is rounded or not, default is false | boolean | no | All | Yes | +| color | The media color, default is #efefef | string | no | All | Yes | +| style | Customize the style of the underlying View component | object | no | All | Yes | ## 遗留问题 diff --git a/zh-cn/rn-section-list-get-item-layout.md b/zh-cn/rn-section-list-get-item-layout.md index 220f3e29..64b28f8f 100644 --- a/zh-cn/rn-section-list-get-item-layout.md +++ b/zh-cn/rn-section-list-get-item-layout.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.2 +> 模板版本：v0.1.3

rn-section-list-get-item-layout

@@ -12,7 +12,7 @@

->[!tip] [Github 地址](https://github.com/jsoendermann/rn-section-list-get-item-layout) +> [!tip] [Github 地址](https://github.com/jsoendermann/rn-section-list-get-item-layout) ## 安装与使用 @@ -20,15 +20,16 @@ -#### **yarn** +#### **npm** ```bash -yarn add react-native-section-list-get-item-layout +npm install react-native-section-list-get-item-layout@^2.2.3 ``` -#### **npm** + +#### **yarn** ```bash -npm install react-native-section-list-get-item-layout +yarn add react-native-section-list-get-item-layout@^2.2.3 ``` @@ -36,31 +37,27 @@ npm install react-native-section-list-get-item-layout 下面的代码展示了这个库的基本使用场景： ```js -import sectionListGetItemLayout from 'react-native-section-list-get-item-layout' +import sectionListGetItemLayout from "react-native-section-list-get-item-layout"; class MyComponent extends React.Component { constructor(props) { - super(props) + super(props); this.getItemLayout = sectionListGetItemLayout({ // The height of the row with rowData at the given sectionIndex and rowIndex - getItemHeight: (rowData, sectionIndex, rowIndex) => sectionIndex === 0 ? 100 : 50, + getItemHeight: (rowData, sectionIndex, rowIndex) => + sectionIndex === 0 ? 100 : 50, // These four properties are optional getSeparatorHeight: () => 1 / PixelRatio.get(), // The height of your separators getSectionHeaderHeight: () => 20, // The height of your section headers getSectionFooterHeight: () => 10, // The height of your section footers listHeaderHeight: 40, // The height of your list header - }) + }); } render() { - return ( - - ) + return ; } } ``` @@ -69,18 +66,21 @@ class MyComponent extends React.Component { ### 兼容性 - 在下述版本验证通过： +本文档内容基于以下版本验证通过： - 1. IDE：DevEco Studio 4.1.3.313;SDK：OpenHarmony(api11) 4.1.0.52;测试设备：Mate40 Pro(NOH-AN00);ROM：2.0.0.52(C00E52R1P17log);RNOH：0.72.11 +1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52(SP22C00E52R1P17log); ## API -详情见 [rn-section-list-get-item-layout源库地址](https://github.com/jsoendermann/rn-section-list-get-item-layout) +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---- | ---- | ---- | -------- | -------- | -------- | -| sectionListGetItemLayout({getItemHeight, getSeparatorHeight, getSectionHeaderHeight,getSectionFooterHeight,listHeaderHeight}) |This package provides a function that helps you construct the getItemLayout function for your SectionLists. For an explanation of why this exists, see this post. It's meant to be used like this | function | Yes | / | Yes | +详情见 [rn-section-list-get-item-layout 源库地址](https://github.com/jsoendermann/rn-section-list-get-item-layout) +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- | +| sectionListGetItemLayout({getItemHeight, getSeparatorHeight, getSectionHeaderHeight,getSectionFooterHeight,listHeaderHeight}) | This package provides a function that helps you construct the getItemLayout function for your SectionLists. For an explanation of why this exists, see this post. It's meant to be used like this | function | Yes | All | Yes | ## 遗留问题 -- Gitee