From 16f14240ac5ebba893445ee03ff1036711c7f45c Mon Sep 17 00:00:00 2001 From: quguiren Date: Thu, 11 Sep 2025 20:52:25 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#ICRN3X]=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A00.77=2026=E4=B8=AA=E4=B8=89=E6=96=B9=E5=BA=93=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: quguiren --- zh-cn/Shopify-restyle.md | 13 + zh-cn/ant-design-react-native.md | 306 ++++++++++-------- zh-cn/galio-framework.md | 13 + zh-cn/react-native-autocomplete-dropdown.md | 97 +++--- zh-cn/react-native-canvas.md | 13 + zh-cn/react-native-collapsible.md | 30 +- zh-cn/react-native-community-hooks.md | 16 +- zh-cn/react-native-confirmation-code-field.md | 15 + zh-cn/react-native-copilot.md | 13 + zh-cn/react-native-dotenv.md | 15 +- zh-cn/react-native-drop-shadow.md | 25 +- zh-cn/react-native-echarts-pro.md | 42 ++- zh-cn/react-native-element-dropdown.md | 15 + zh-cn/react-native-error-boundary.md | 13 + zh-cn/react-native-paper.md | 49 ++- zh-cn/react-native-qrcode-svg.md | 21 +- zh-cn/react-native-reanimated-carousel.md | 83 +++-- zh-cn/react-native-reanimated-table.md | 13 + zh-cn/react-native-shadow-2.md | 19 +- zh-cn/react-native-testing-library.md | 29 +- zh-cn/react-native-vector-icons.md | 13 + zh-cn/react-navigation-header-buttons.md | 15 + zh-cn/reassure.md | 13 + zh-cn/recyclerlistview.md | 31 ++ 24 files changed, 667 insertions(+), 245 deletions(-) diff --git a/zh-cn/Shopify-restyle.md b/zh-cn/Shopify-restyle.md index 1af080c13..f2cd72ae0 100644 --- a/zh-cn/Shopify-restyle.md +++ b/zh-cn/Shopify-restyle.md @@ -16,6 +16,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 2.4.4 | 0.72 | +| 2.4.5 | 0.77 | + 进入到工程目录并输入以下命令： @@ -23,13 +28,21 @@ #### **npm** ```bash +# V2.4.4 npm install @shopify/restyle@2.4.4 + +# V2.4.5 +npm install @shopify/restyle@2.4.5 ``` #### **yarn** ```bash +# V2.4.4 yarn add @shopify/restyle@2.4.4 + +# V2.4.5 +yarn add @shopify/restyle@2.4.5 ``` diff --git a/zh-cn/ant-design-react-native.md b/zh-cn/ant-design-react-native.md index e1f10ba0b..c47f8d6b1 100644 --- a/zh-cn/ant-design-react-native.md +++ b/zh-cn/ant-design-react-native.md @@ -16,6 +16,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 5.2.2 | 0.72 | +| 5.4.2 | 0.77 | + 进入到工程目录并输入以下命令： @@ -23,16 +28,29 @@ #### **npm** ```bash +# V5.2.2 npm install @ant-design/react-native@5.2.2 + +# V5.4.2 +npm install @ant-design/react-native@5.4.2 ``` #### **yarn** ```bash +# V5.2.2 yarn add @ant-design/react-native@5.2.2 + +# V5.4.2 +yarn add @ant-design/react-native@5.4.2 ``` -> [!TIP] 本库还依赖了[@react-native-oh-tpl/slider](/zh-cn/react-native-community-slider.md)、[@react-native-oh-tpl/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md)、[@react-native-oh-tpl/react-native-modal-popover](/zh-cn/react-native-modal-popover.md)、[@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md)和[react-native-community/segmented-control](/zh-cn/react-native-community-segmented-control.md) +> [!TIP] 本库还依赖了 +> +> V5.2.2：[@react-native-oh-tpl/slider](/zh-cn/react-native-community-slider.md)、[@react-native-oh-tpl/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md)、[@react-native-oh-tpl/react-native-modal-popover](/zh-cn/react-native-modal-popover.md)、[@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md)和[react-native-community/segmented-control](/zh-cn/react-native-community-segmented-control.md) +> +> V5.4.2：[@react-native-oh-tpl/react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md)、[@react-native-oh-tpl/react-native-modal-popover](/zh-cn/react-native-modal-popover.md)和[@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md) +> > [!TIP] 本库指定5.2.2版本,在执行完依赖安装命令后需要去除掉package.json中对应依赖项中的^ > @@ -191,6 +209,8 @@ export default class BasicTagExample extends React.Component { ## Link +V5.2.2 + > [!TIP] @react-native-oh-tpl/react-native-gesture-handler 安装 v2.14.7 版本配套使用 > [!TIP] @react-native-oh-tpl/slider 安装 v4.4.3-0.3.2 版本配套使用 @@ -204,11 +224,24 @@ export default class BasicTagExample extends React.Component { 如未引入请参照文档进行引入 - [@react-native-oh-tpl/slider 引入方法](/zh-cn/react-native-community-slider.md) - - [@react-native-oh-tpl/react-native-gesture-handler 引入方法](/zh-cn/react-native-gesture-handler.md) - - [@react-native-oh-tpl/react-native-modal-popover 引入方法](/zh-cn/react-native-modal-popover.md) +- [@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md) + +V5.4.2 + +> [!TIP] @react-native-oh-tpl/react-native-gesture-handler 安装 v2.14.7 版本配套使用 +> [!TIP] @react-native-oh-tpl/react-native-modal-popover 安装 v2.1.3-0.0.1 版本配套使用 + +> [!TIP] @react-native-oh-tpl/react-native-reanimated 安装 v3.6.2 版本配套使用 + +本库 HarmonyOS 侧实现依赖 @react-native-oh-tpl/react-native-gesture-handler 、@react-native-oh-tpl/react-native-reanimated 和@react-native-oh-tpl/react-native-modal-popover 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 + +如未引入请参照文档进行引入 + +- [@react-native-oh-tpl/react-native-gesture-handler 引入方法](/zh-cn/react-native-gesture-handler.md) +- [@react-native-oh-tpl/react-native-modal-popover 引入方法](/zh-cn/react-native-modal-popover.md) - [@react-native-oh-tpl/react-native-reanimated](/zh-cn/react-native-reanimated.md) ## 约束与限制 @@ -312,18 +345,22 @@ export default class BasicTagExample extends React.Component { **Modal**：对话框组件，用作显示系统的重要信息，并请求用户进行操作反馈，eg：删除某个重要内容时，弹出 Modal 进行二次确认。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------: | :------: | :------: | :---------------: | -| visible | 对话框是否可见 | Boolean | No | All | Yes | -| closable | 是否显示关闭按钮 | Boolean | No | All | Yes | -| maskClosable | 点击蒙层是否允许关闭 | Boolean | No | All | Yes | -| onClose | 点击 x 或 mask 回调 | (): void | No | All | Yes | -| transparent | 是否背景透明 | Boolean | No | All | Yes | -| popup | 是否弹窗模式 | Boolean | No | All | Yes | -| animationType | 可选: 'fade' / 'slide' | String | No | All | Yes | -| title | 标题 | React.Element | No | All | Yes | -| footer | 底部内容 | Array [{text, onPress}] | No | All | Yes | -| onRequestClose | onRequestClose 回调会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。返回 true 时会在 modal 处于开启状态时阻止 BackHandler 事件。 | (): boolean | No | All | No | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :------: | :------: | :---------------: | +| visible | 对话框是否可见 | Boolean | No | All | Yes | +| closable | 是否显示关闭按钮 | Boolean | No | All | Yes | +| maskClosable | 点击蒙层是否允许关闭 | Boolean | No | All | Yes | +| onClose | 点击 x 或 mask 回调 | (): void | No | All | Yes | +| transparent | 是否背景透明 | Boolean | No | All | Yes | +| popup | 是否弹窗模式 | Boolean | No | All | Yes | +| animationType | 可选: 'fade' / 'slide' | String | No | All | Yes | +| animationDuration5.4.2+ | 动画持续时间，单位ms | Number | No | All | Yes | +| modalType5.4.2+ | 弹窗的类型，为`'portal'`时则从``根节点插入(默认)，为`'modal'`时则同[`react-native/Modal`](https://reactnative.dev/docs/modal)(用于获取当前context)，为`'view'`时则同`react-native/View`(用于弹窗中嵌套弹窗) | 'portal'`| `'modal'` | `'view' | No | All | Yes | +| title | 标题 | React.Element | No | All | Yes | +| footer | 底部内容 | Array [{text, onPress}] | No | All | Yes | +| onRequestClose | onRequestClose 回调会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。返回 true 时会在 modal 处于开启状态时阻止 BackHandler 事件。 | (): boolean | No | All | No | +| style5.4.2+ | 样式，同`styles.innerContainer` | `ViewStyle` | No | All | Yes | +| styles5.4.2+ | 语义化结构 style | [ModalStyle](https://github.com/ant-design/ant-design-mobile-rn/blob/5.4.2/components/modal/index.zh-CN.md#modalstyle-语义化样式) | No | All | Yes | **Modal.alert(title, message, actions?, platform?)**：对话框组件。 @@ -429,19 +466,23 @@ export default class BasicTagExample extends React.Component { **Carousel**：走马灯组件。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :--------------: | :--------------------: | :------------------------: | :------: | :------: | :---------------: | -| selectedIndex | 手动设置当前显示的索引 | number | No | All | Yes | -| dots | 是否显示面板指示点 | Boolean | No | All | Yes | -| vertical | 垂直显示 | Boolean | No | All | Yes | -| autoplay | 是否自动切换 | Boolean | No | All | Yes | -| autoplayInterval | 自动切换的时间间隔 | Number | No | All | Yes | -| infinite | 是否循环播放 | Boolean | No | All | Yes | -| afterChange | 切换面板后的回调函数 | (current: number): void | No | All | Yes | -| dotStyle | 指示点样式 | ViewStyle | No | All | Yes | -| dotActiveStyle | 当前激活的指示点样式 | ViewStyle | No | All | Yes | -| pageStyle | 轮播页样式 | ViewStyle | No | All | Yes | -| pagination | 自定义 pagination | (props) => React.ReactNode | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------------------------: | :----------------------------------------------------------: | :------------------------------------: | :------: | :------: | :---------------: | +| selectedIndex | 手动设置当前显示的索引 | number | No | All | Yes | +| dots | 是否显示面板指示点 | Boolean | No | All | Yes | +| vertical | 垂直显示 | Boolean | No | All | Yes | +| autoplay | 是否自动切换 | Boolean | No | All | Yes | +| autoplayInterval | 自动切换的时间间隔 | Number | No | All | Yes | +| infinite | 是否循环播放 | Boolean | No | All | Yes | +| afterChange | 切换面板后的回调函数 | (current: number): void | No | All | Yes | +| dotStyle | 指示点样式 | ViewStyle | No | All | Yes | +| dotActiveStyle | 当前激活的指示点样式 | ViewStyle | No | All | Yes | +| pageStyle | 轮播页样式 | ViewStyle | No | All | Yes | +| pagination | 自定义 pagination | (props) => React.ReactNode | No | All | Yes | +| lazy5.4.2+ | 是否懒加载。支持布尔值或函数返回 | Boolean \| `(index:number) => boolean` | No | All | Yes | +| renderLazyPlaceholder5.4.2+ | 返回自定义 React 元素以呈现尚未呈现的页面的回调。以`索引`作为参数的对象。需要启用 `lazy` 属性。 | `(index:number) => ReactNode` | No | All | Yes | +| style5.4.2+ | 轮播容器样式 (建议设置，整体轮播大小由容器决定非页内决定) | ViewStyle | No | All | Yes | +| onScrollAnimationEnd5.4.2+ | 当滚动动画结束时调用 | ()=>void | No | All | Yes | **Carousel methods** @@ -528,7 +569,7 @@ export default class BasicTagExample extends React.Component { | onChange | 选中后的回调 | `(value: PickerValue[], extend: PickerValueExtend) => void` | No | All | Yes | | onPickerChange | 每列数据选择变化后的回调函数 | `(value: PickerValue[], index: number) => void` | No | All | Yes | | onVisibleChange | 当显隐状态变化时回调函数 | `(visible: bool): void` | No | All | Yes | -| renderLabel | 自定义渲染每列展示的内容 | `(item: PickerColumnItem, index: number) => ReactNode` 或 `(item) => item.label` | No | All | Yes | +| renderLabel | 自定义渲染每列展示的内容 | `(item: PickerColumnItem, index: number) => ReactNode` 或 `(item) => item.label`5.1.0 `(item: PickerColumnItem, itemIndex: number,colIndex: number) => ReactNode` 或 `(item) => item.label`5.4.2+ | No | All | Yes | | title | 大标题 | ReactNode | No | All | Yes | | okText | 选中的文案 | String | No | All | Yes | | dismissText | 取消选中的文案 | String | No | All | Yes | @@ -573,18 +614,18 @@ export default class BasicTagExample extends React.Component { **PickerView**：PickerView 的功能类似于 Picker ，但它是直接渲染在区域中，而不是弹出窗口。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------------: | :--------------------------------------------------------------------: | :------------------------------------------------------------------------------: | :------: | :------: | :---------------: | -| data | 数据源 | `PickerColumn` / `PickerColumn[]` | No | All | Yes | -| value | 选中项 | `PickerValue[]` | No | All | Yes | -| defaultValue | 默认选中项 | `PickerValue[]` | No | All | Yes | -| cascade | 是否级联。子级来自`data`参数内的`children`属性 | Boolean | No | All | Yes | -| cols | 列数 | Number | No | All | Yes | -| onChange | 选中后的回调，可使用[rc-form](https://github.com/react-component/form) | `(value: PickerValue[], extend: PickerValueExtend) => void` | No | All | Yes | -| renderLabel | 自定义渲染每列展示的内容 | `(item: PickerColumnItem, index: number) => ReactNode` 或 `(item) => item.label` | No | All | Yes | -| loading | 是否处于加载状态 | Boolean | No | All | Yes | -| loadingContent | 加载状态下展示的内容 | ReactNode | No | All | Yes | -| indicatorStyle | 默认 Indicator 的样式 | Object | No | All | No | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :------: | :------: | :---------------: | +| data | 数据源 | `PickerColumn` / `PickerColumn[]` | No | All | Yes | +| value | 选中项 | `PickerValue[]` | No | All | Yes | +| defaultValue | 默认选中项 | `PickerValue[]` | No | All | Yes | +| cascade | 是否级联。子级来自`data`参数内的`children`属性 | Boolean | No | All | Yes | +| cols | 列数 | Number | No | All | Yes | +| onChange | 选中后的回调，可使用[rc-form](https://github.com/react-component/form) | `(value: PickerValue[], extend: PickerValueExtend) => void` | No | All | Yes | +| renderLabel | 自定义渲染每列展示的内容 | `(item: PickerColumnItem, index: number) => ReactNode` 或 `(item) => item.label`5.1.0 `(item: PickerColumnItem, itemIndex: number,colIndex: number) => ReactNode` 或 `(item) => item.label`5.4.2+ | No | All | Yes | +| loading | 是否处于加载状态 | Boolean | No | All | Yes | +| loadingContent | 加载状态下展示的内容 | ReactNode | No | All | Yes | +| indicatorStyle | 默认 Indicator 的样式 | Object | No | All | No | **PickerView 自定义样式** @@ -598,7 +639,7 @@ export default class BasicTagExample extends React.Component { **PickerView 遮罩层** -还支持自定义遮罩样式，如使用渐变组件``。当前默认为白色半透明。 +还支持自定义遮罩样式，如使用渐变组件``。当前默认为白色半Form-Instance透明。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :--------------: | :----------------------: | :------------------------------------------------------------------------------------------: | :------: | :------: | :---------------: | @@ -693,16 +734,17 @@ export default class BasicTagExample extends React.Component { **Switch**：滑动开关组件，在两个互斥对象进行选择，eg：选择开或关。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :---------------: | :-----------------------------------------------------: | :-------------------------------------: | :------: | :------: | :---------------: | -| checked | 是否默认选中 | Boolean | No | All | Yes | -| defaultChecked | 初始是否打开 | Boolean | No | All | Yes | -| disabled | 是否不可修改 | boolean | No | All | Yes | -| loading | 加载中的开关 | Boolean | No | All | Yes | -| onChange | 变化时的回调函数，当返回 Promise 时，会自动显示加载状态 | (val: boolean) => void 或 Promise | No | All | Yes | -| color | 开关打开后的颜色 | String | No | All | Yes | -| checkedChildren | 选中时的内容 | ReactNode | No | All | Yes | -| unCheckedChildren | 非选中时的内容 | ReactNode | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :---------------------: | :-----------------------------------------------------: | :----------------------------------------------------------: | :------: | :------: | :---------------: | +| checked | 是否默认选中 | Boolean | No | All | Yes | +| defaultChecked | 初始是否打开 | Boolean | No | All | Yes | +| disabled | 是否不可修改 | boolean | No | All | Yes | +| loading | 加载中的开关 | Boolean | No | All | Yes | +| onChange | 变化时的回调函数，当返回 Promise 时，会自动显示加载状态 | (val: boolean) => void 或 Promise | No | All | Yes | +| color | 开关打开后的颜色 | String | No | All | Yes | +| checkedChildren | 选中时的内容 | ReactNode | No | All | Yes | +| unCheckedChildren | 非选中时的内容 | ReactNode | No | All | Yes | +| styles5.4.2+ | 语义化结构 style | [SwitchStyle](https://github.com/ant-design/ant-design-mobile-rn/blob/5.4.2/components/switch/index.zh-CN.md#switchStyle-语义化样式) | No | All | Yes | **Tabs**：标签页组件，用于让用户在不同的视图中进行切换。 @@ -827,34 +869,34 @@ export default class BasicTagExample extends React.Component { **NoticeBar**：通告栏组件，在导航栏下方，一般用作系统提醒、活动提醒等通知。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :----------: | :---------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------: | :------: | :------: | :---------------: | -| mode | 提示类型，可选 `closable`,`link` | String | No | All | Yes | -| icon | 在开始位置设置图标 | ReactNode | No | All | Yes | -| children | 子组件 | ReactNode | No | All | Yes | -| onPress | 点击关闭或者操作区域的回调函数 | (): void | No | All | Yes | -| marqueeProps | marquee 参数 | Object | No | All | Yes | -| action | 用于替换操作 icon 的文案 | ReactElement | No | All | Yes | -| onClose | 点击关闭的回调函数。仅当`mode="closable"`时生效 | () => void | No | All | Yes | -| style | 最外层样式 | StyleProp | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :----------: | :---------------------------------------------: | :----------------------------------------------------------: | :------: | :------: | :---------------: | +| mode | 提示类型，可选 `closable`,`link` | String | No | All | Yes | +| icon | 在开始位置设置图标 | ReactNode | No | All | Yes | +| children | 子组件 | ReactNode | No | All | Yes | +| onPress | 点击关闭或者操作区域的回调函数 | (): void | No | All | Yes | +| marqueeProps | marquee 参数 | Object | No | All | Yes | +| action | 用于替换操作 icon 的文案 | ReactElement | No | All | Yes | +| onClose | 点击关闭的回调函数。仅当`mode="closable"`时生效 | () => void | No | All | Yes | +| style | 最外层样式 | StyleProp | No | All | Yes | | styles | 语义化结构 style | [NoticeBarStyle](https://github.com/ant-design/ant-design-mobile-rn/blob/5.2.2/components/notice-bar/index.zh-CN.md#noticebarstyle-语义化样式) | No | All | Yes | **NoticeBar.MarqueeProps** -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :-------------: | :-------------------------------------------------------------------------: | :--------------------------------------: | :------: | :------: | :---------------: | -| autoFill | 是否自动用 children 的副本填充字幕框中的空白区域 | `Boolean` | No | All | Yes | -| direction | 字幕滑动的方向 | `'left'` 或`'right'` 或`'up'` 或`'down'` | No | All | Yes | -| fps | 滚动速度，单位 `pixels/second` | `Number` | No | All | Yes | -| leading | 渲染后动画延迟的时间（以毫秒为单位） | `Number` | No | All | Yes | -| loop | 字幕循环的次数, `true`或`0`表示无限次 | `Boolean` 或`Number` | No | All | Yes | -| onFinish | 当字幕结束滚动时的回调。仅当`loop={false}`或`非零`时调用 | `() => void` | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :-------------: | :----------------------------------------------------------: | :--------------------------------------: | :------: | :------: | :---------------: | +| autoFill | 是否自动用 children 的副本填充字幕框中的空白区域 | `Boolean` | No | All | Yes | +| direction | 字幕滑动的方向 | `'left'` 或`'right'` 或`'up'` 或`'down'` | No | All | Yes | +| fps | 滚动速度，单位 `pixels/second` | `Number` | No | All | Yes | +| leading | 渲染后动画延迟的时间（以毫秒为单位） | `Number` | No | All | Yes | +| loop | 字幕循环的次数, `true`或`0`表示无限次 | `Boolean` 或`Number` | No | All | Yes | +| onFinish | 当字幕结束滚动时的回调。仅当`loop={false}`或`非零`时调用 | `() => void` | No | All | Yes | | onCycleComplete | 当字幕完成循环时的回调。如果达到最大循环次数，则不会调用（改用 `onFinish`） | `() => void` | No | All | Yes | -| play | 播放或暂停滚动字幕 | `Boolean` | No | All | Yes | -| spacing | 重复字幕之间的间距。仅当`autoFill={true}`时有效 | `Number` | No | All | Yes | -| style | 字幕样式 | `TextStyle` | No | All | Yes | -| trailing | 上一次循环后到下一次动画的延迟时间（以毫秒为单位） | `Number` | No | All | Yes | -| wrapStyle | Marquee 组件外部 style | `ViewStyle` | No | All | Yes | +| play | 播放或暂停滚动字幕 | `Boolean` | No | All | Yes | +| spacing | 重复字幕之间的间距。仅当`autoFill={true}`时有效 | `Number` | No | All | Yes | +| style | 字幕样式 | `TextStyle` | No | All | Yes | +| trailing | 上一次循环后到下一次动画的延迟时间（以毫秒为单位） | `Number` | No | All | Yes | +| wrapStyle | Marquee 组件外部 style | `ViewStyle` | No | All | Yes | **SearchBar**：搜索栏组件，一般可位于 NavBar 下方，通过『取消按钮』退出激活状态。 @@ -894,22 +936,28 @@ export default class BasicTagExample extends React.Component { **Slider**：滑动输入条组件，允许用户在一个区间中选择特定值，eg：控制屏幕的显示亮度。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :-----------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------: | :------: | :------: | :---------------: | -| min | 最小值 | Number | No | All | Yes | -| max | 最大值 | Number | No | All | Yes | -| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分 | Number or null | No | All | Yes | -| ticks | 是否显示刻度 | `boolean` | No | All | Yes | -| range | 是否为双滑块 | `boolean` | No | All | Yes | -| icon | 滑块的图标 | `ReactNode` | No | All | Yes | -| styles | 语义化结构 style | [SliderStyle](https://github.com/ant-design/ant-design-mobile-rn/blob/5.2.2/components/slider/index.zh-CN.md#sliderstyle-语义化样式) | No | All | Yes | -| style | 最外层容器样式 | `StyleProp` | No | All | Yes | -| marks | 刻度标记 | `{ [key: number]: React.ReactNode }` | No | All | Yes | -| value | 设置当前取值。 | Number | No | All | Yes | -| defaultValue | 设置初始取值。 | Number | No | All | Yes | -| disabled | 滑块为禁用状态 | Boolean | No | All | Yes | -| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | Function | No | All | Yes | -| onAfterChange | 与 `ontouchend` 触发时机一致，把当前值作为参数传入 | Function | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :------: | :------: | :---------------: | +| min | 最小值 | Number | No | All | Yes | +| max | 最大值 | Number | No | All | Yes | +| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分 | Number or null | No | All | Yes | +| ticks | 是否显示刻度 | `boolean` | No | All | Yes | +| range | 是否为双滑块 | `boolean` | No | All | Yes | +| icon | 滑块的图标 | `ReactNode` | No | All | Yes | +| styles | 语义化结构 style | [SliderStyle](https://github.com/ant-design/ant-design-mobile-rn/blob/5.2.2/components/slider/index.zh-CN.md#sliderstyle-语义化样式) | No | All | Yes | +| style | 最外层容器样式 | `StyleProp` | No | All | Yes | +| marks | 刻度标记 | `{ [key: number]: React.ReactNode }` | No | All | Yes | +| value | 设置当前取值。 | Number | No | All | Yes | +| defaultValue | 设置初始取值。 | Number | No | All | Yes | +| disabled | 滑块为禁用状态 | Boolean | No | All | Yes | +| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | Function | No | All | Yes | +| onAfterChange | 与 `ontouchend` 触发时机一致，把当前值作为参数传入 | Function | No | All | Yes | +| disabledStep5.4.2+ | 是否禁用步距；禁用后`onChange`将返回带有小数点的值 | `boolean` | No | All | Yes | +| onSlidingStart5.4.2+ | 当用户拿起滑块时调用的回调。始值作为参数传递给回调处理程序。 | Function | No | All | Yes | +| onSlidingComplete5.4.2+ | 当用户释放滑块时调用的回调，无论值是否已更改。当前值作为参数传递给回调处理程序。 | Function | No | All | Yes | +| popover5.4.2+ | 是否在拖动时显示悬浮提示，支持传入函数自定义渲染内容 | `boolean` | No | All | Yes | +| residentPopover5.4.2+ | `popover` 是否常驻显示，`popover` 存在时生效 | `boolean ` | No | All | Yes | +| tapToSeek5.4.2+ | 允许点击轨道来设置 thumb icon 位置 | `boolean` | No | All | Yes | **Popover**：气泡组件，在点击控件或者某个区域后，浮出一个气泡菜单来做更多的操作。 如果设置了遮罩层，建议通过点击遮罩层的任一位置，进行退出。 @@ -1004,37 +1052,37 @@ export default class BasicTagExample extends React.Component { 同 `Input` 属性，外加： -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :------: | :-------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------: | :------: | :------: | :---------------: | -| autoSize | 自适应内容高度，可设置为 `true` | `false` 或对象：`{ minRows: 2, maxRows: 6 }` | No | All | Yes | -| rows | 固定显示几行，`autoSize` 优先级高 | number | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------: | :-------------------------------: | :----------------------------------------------------------: | :------: | :------: | :---------------: | +| autoSize | 自适应内容高度，可设置为 `true` | `false` 或对象：`{ minRows: 2, maxRows: 6 }` | No | All | No | +| rows | 固定显示几行，`autoSize` 优先级高 | number | No | All | No | | styles | 语义化结构 style | [InputStyle](https://github.com/ant-design/ant-design-mobile-rn/blob/5.2.2/components/input/index.zh-CN.md#inputstyle-语义化样式) | No | All | Yes | **Form** 表单组件，高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :--------------: | :-------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------: | :--------: | :------: | :---------------: | -| disabled | 设置表单组件禁用，仅对 `@ant-design/react-native` 内置组件有效 | boolean | No | All | Yes | -| component | 设置 Form 渲染元素，为 `false` 则不创建 ReactNode 节点 | number | No | All | Yes | -| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。 | [ FieldData](https://github.com/ant-design/ant-design-mobile-rn/blob/5.2.2/components/form/index.zh-CN.md#fielddata)[] | No | All | Yes | -| form | 经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建 | [FormInstance](https://github.com/ant-design/ant-design-mobile-rn/blob/5.2.2/components/form/index.zh-CN.md#forminstance) | No | All | Yes | -| feedbackIcons | 当 `Form.Item` 有 `hasFeedback` 属性时可以自定义图标 | [FeedbackIcons](https://github.com/ant-design/ant-design-mobile-rn/blob/5.2.2/components/form/index.zh-CN.md#feedbackicons) | No | All | Yes | -| initialValues | 表单默认值，只有初始化以及重置时生效 | object | No | All | Yes | -| labelStyle | label 标签的样式 | `ViewStyle | TextStyle` | No | All | Yes | -| layout | 表单布局 | `horizontal` | No | All | Yes | -| name | 表单名称，会作为表单字段 `id` 前缀使用 | string | No | All | Yes | -| preserve | 当字段被删除时保留字段值。你可以通过 `getFieldsValue(true)` 来获取保留字段值 | boolean | No | All | Yes | -| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \| `optional` \| ((label: ReactNode, info: { required: boolean }) => ReactNode) | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :--------: | :------: | :---------------: | +| disabled | 设置表单组件禁用，仅对 `@ant-design/react-native` 内置组件有效 | boolean | No | All | Yes | +| component | 设置 Form 渲染元素，为 `false` 则不创建 ReactNode 节点 | number | No | All | Yes | +| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。 | [ FieldData](https://github.com/ant-design/ant-design-mobile-rn/blob/5.2.2/components/form/index.zh-CN.md#fielddata)[] | No | All | Yes | +| form | 经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建 | [FormInstance](https://github.com/ant-design/ant-design-mobile-rn/blob/5.2.2/components/form/index.zh-CN.md#forminstance) | No | All | Yes | +| feedbackIcons | 当 `Form.Item` 有 `hasFeedback` 属性时可以自定义图标 | [FeedbackIcons](https://github.com/ant-design/ant-design-mobile-rn/blob/5.2.2/components/form/index.zh-CN.md#feedbackicons) | No | All | Yes | +| initialValues | 表单默认值，只有初始化以及重置时生效 | object | No | All | Yes | +| labelStyle | label 标签的样式 | `ViewStyle` | TextStyle` | No | All | +| layout | 表单布局 | `horizontal` | No | All | Yes | +| name | 表单名称，会作为表单字段 `id` 前缀使用 | string | No | All | Yes | +| preserve | 当字段被删除时保留字段值。你可以通过 `getFieldsValue(true)` 来获取保留字段值 | boolean | No | All | Yes | +| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \| `optional` \| ((label: ReactNode, info: { required: boolean }) => ReactNode) | No | All | Yes | | validateMessages | 验证提示模板，说明[见下](https://github.com/ant-design/ant-design-mobile-rn/blob/5.2.2/components/form/index.zh-CN.md#validatemessages) | [ValidateMessages](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134) | No | All | Yes | -| validateTrigger | 统一设置字段触发验证的时机 | string \| string[] | No | All | Yes | -| wrapperStyle | 需要为输入控件设置布局样式时，使用该属性，用法同 labelStyle | `ViewStyle` | No | All | Yes | -| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | No | All | Yes | -| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | No | All | Yes | -| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | No | All | Yes | -| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | No | All | Yes | -| styles | 语义化结构 style | 同 [ListStyle](https://github.com/ant-design/ant-design-mobile-rn/blob/5.2.2/components/list-cn#liststyle-语义化样式) | No | All | Yes | +| validateTrigger | 统一设置字段触发验证的时机 | string \| string[] | No | All | Yes | +| wrapperStyle | 需要为输入控件设置布局样式时，使用该属性，用法同 labelStyle | `ViewStyle` | No | All | Yes | +| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | No | All | Yes | +| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | No | All | Yes | +| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | No | All | Yes | +| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | No | All | Yes | +| styles | 语义化结构 style | 同 [ListStyle](https://github.com/ant-design/ant-design-mobile-rn/blob/5.2.2/components/list-cn#liststyle-语义化样式) | No | All | Yes | **Form.Item** @@ -1109,17 +1157,18 @@ export default class BasicTagExample extends React.Component { **Tooltip**：气泡组件，在点击控件或者某个区域后，浮出一个气泡菜单来做更多的操作。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :-------------: | :--------------------------: | :-----------------------------------------------------------------------------------------------------: | :------: | :------: | :---------------: | -| children | 触发 `Tooltip` 的元素 | `React.ReactElement` | Yes | All | Yes | -| content | 弹出内容 | `React.ReactNode` | No | All | Yes | -| defaultVisible | 默认是否显隐 | `boolean` | No | All | Yes | -| mode | 设置亮色模式或者黑色模式 | `'light'` | No | All | Yes | -| onVisibleChange | 显示隐藏的回调 | `(visible: boolean) => void` | No | All | Yes | -| placement | 气泡框位置 | `'top'` | No | All | Yes | -| styles | 语义化结构 style | [TooltipStyle](https://github.com/ant-design/ant-design-mobile-rn/blob/master/#tooltipstyle-语义化样式) | No | All | Yes | -| trigger | 触发方式 | `'onPress'` | No | All | Yes | -| visible | 受控模式下，是否展示弹出内容 | `boolean` | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :------: | :------: | :---------------: | +| children | 触发 `Tooltip` 的元素 | `React.ReactElement` | Yes | All | Yes | +| content | 弹出内容 | `React.ReactNode` | No | All | Yes | +| defaultVisible | 默认是否显隐 | `boolean` | No | All | Yes | +| mode | 设置亮色模式或者黑色模式 | `'light'` | No | All | Yes | +| onVisibleChange | 显示隐藏的回调 | `(visible: boolean) => void` | No | All | Yes | +| placement | 气泡框位置 | `'top'` | No | All | Yes | +| styles | 语义化结构 style | [TooltipStyle](https://github.com/ant-design/ant-design-mobile-rn/blob/master/#tooltipstyle-语义化样式) | No | All | Yes | +| trigger | 触发方式 | `'onPress'` | No | All | Yes | +| visible | 受控模式下，是否展示弹出内容 | `boolean` | No | All | Yes | +| crossOffset5.4.2+ | 设置弹窗位置的偏移量；top: 沿元素和其触发元素之间的主轴应用的附加偏移。left: 沿元素和其触发元素之间的横轴应用的附加偏移。 | `{ top: number, left: number }` | No | All | Yes | **Tooltip.Menu** @@ -1150,6 +1199,11 @@ export default class BasicTagExample extends React.Component { - Tooltip 组件气泡位置异常展示，与 Android/IOS 一致[issue#1376](https://github.com/ant-design/ant-design-mobile-rn/issues/1376)。 - Radio 组件的 defaultCheck 属性无法正常生效，与 Android/IOS 一致[issue#1380](https://github.com/ant-design/ant-design-mobile-rn/issues/1380)。 - Picker 组件的 defaultValue 属性无法正常生效，与 Android/IOS 一致[issue#1381](https://github.com/ant-design/ant-design-mobile-rn/issues/1381)。 +- V5.4.2 三方库存在checkBox的bug(数据错乱，闪退)。源库开发者已修改， + https://github.com/ant-design/ant-design-mobile-rn/pull/1434 +- Carousel组件中的infinite为true没有循环播放（偶现），与 Android/IOS 一致[issue#1457](https://github.com/ant-design/ant-design-mobile-rn/issues/1457)。 +- Carousel组件窗口显示下面高亮按钮对应不上的问题（偶现），与 Android/IOS 一致[issue#1457](https://github.com/ant-design/ant-design-mobile-rn/issues/1457)。 +- Tabs组件onChange方法首次滑动不生效问题（偶现），与 Android/IOS 一致[issue#1457](https://github.com/ant-design/ant-design-mobile-rn/issues/1457)。 ## 开源协议 diff --git a/zh-cn/galio-framework.md b/zh-cn/galio-framework.md index 3542ba05f..d95d97999 100644 --- a/zh-cn/galio-framework.md +++ b/zh-cn/galio-framework.md @@ -19,18 +19,31 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 0.8.0 | 0.72 | +| 0.8.1 | 0.77 | + #### **npm** ```bash +# V0.8.0 npm install galio-framework@0.8.0 + +# V0.8.1 +npm install galio-framework@0.8.1 ``` #### **yarn** ```bash +# V0.8.0 yarn add galio-framework@0.8.0 + +# V0.8.1 +yarn add galio-framework@0.8.1 ``` diff --git a/zh-cn/react-native-autocomplete-dropdown.md b/zh-cn/react-native-autocomplete-dropdown.md index 56a600c8d..c2ef4d391 100644 --- a/zh-cn/react-native-autocomplete-dropdown.md +++ b/zh-cn/react-native-autocomplete-dropdown.md @@ -18,18 +18,31 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 4.0.0 | 0.72 | +| 4.3.1 | 0.77 | + #### npm ```bash +# V4.0.0 npm install react-native-autocomplete-dropdown@4.0.0-rc.5 + +# V4.3.1 +npm install react-native-autocomplete-dropdown@4.3.1 ``` #### yarn ```bash +# V4.0.0 yarn add react-native-autocomplete-dropdown@4.0.0-rc.5 + +# V4.3.1 +yarn add react-native-autocomplete-dropdown@4.3.1 ``` @@ -112,47 +125,49 @@ export const LocalDataSetExample = memo(() => { > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -|-------------------------------|---------------------------------------------------------------------------------------------------------------|---------------------|----------|-------------|-------------------| -| dataSet | set of list items | array | no | iOS/Android | yes | -| initialValue | string (id) or object that contain id | object \| string | no | iOS/Android | yes | -| loading | loading state | boolean | no | iOS/Android | yes | -| useFilter | whether use local filter by dataSet (useful set to false for remote filtering to prevent rerender twice) | boolean | no | iOS/Android | yes | -| showClear | show clear button | boolean | no | iOS/Android | yes | -| showChevron | show chevron (open/close) button | boolean | no | iOS/Android | yes | -| closeOnSubmit | sets the max stroke line width | boolean | no | iOS/Android | yes | -| clearOnFocus | whether to clear typed text on focus | boolean | no | iOS/Android | yes | -| caseSensitive | whether to perform case-sensitive search | boolean | no | iOS/Android | yes | -| ignoreAccents | ignore diacritics | boolean | no | iOS/Android | yes | -| trimSearchText | trim the searched text | boolean | no | iOS/Android | yes | -| editable | is textInput editable | boolean | no | iOS/Android | yes | -| debounce | wait ms before call onChangeText | number | no | iOS/Android | yes | -| suggestionsListMaxHeight | max height of dropdown | number | no | iOS/Android | yes | -| direction | "up" or "down" | up \| down | no | iOS/Android | yes | -| matchFrom | whether match suggestions from start of titles or anywhere in the title. Possible values are "any" or "start" | any \| start | no | iOS/Android | yes | -| onChangeText | event textInput onChangeText | function | no | iOS/Android | yes | -| onSelectItem | event onSelectItem | function | no | iOS/Android | yes | -| onOpenSuggestionsList | event onOpenSuggestionsList | function | no | iOS/Android | yes | -| onChevronPress | event onChevronPress | function | no | iOS/Android | yes | -| onClear | event on clear button press | function | no | iOS/Android | yes | -| onSubmit | event on submit KB button press | function | no | iOS/Android | yes | -| onBlur | event fired on text input blur | function | no | iOS/Android | yes | -| onFocus | event on focus text input | function | no | iOS/Android | yes | -| renderItem | JSX for render item (item, searchText) => JSX | function | no | iOS/Android | yes | -| controller | return reference to module controller with methods close, open, toggle, clear, setInputText, setItem | function | no | iOS/Android | yes | -| containerStyle | containerStyle | ViewStyle | no | iOS/Android | yes | -| inputContainerStyle | custom input container style | ViewStyle | no | iOS/Android | yes | -| rightButtonsContainerStyle | rightButtonsContainerStyle | ViewStyle | no | iOS/Android | yes | -| suggestionsListContainerStyle | suggestionsListContainerStyle | ViewStyle | no | iOS/Android | yes | -| suggestionsListTextStyle | suggestionsListTextStyle | TextStyle | no | iOS/Android | yes | -| rightIconComponent | custom chevron icon | React.Component | no | iOS/Android | yes | -| ChevronIconComponent | Chevron Custom Icon | React.Component | no | iOS/Android | yes | -| ClearIconComponent | Clear Custom Icon | React.Component | no | iOS/Android | yes | -| EmptyResultComponent | replace the default `` Component on empty result | React.Component | no | iOS/Android | yes | -| InputComponent | input element component | React.ComponentType | no | iOS/Android | yes | -| emptyResultText | replace the default "Nothing found" text on empty result | string | no | iOS/Android | yes | -| textInputProps | text input props | TextInputProps | no | iOS/Android | yes | -| flatListProps | props for \ component | FlatListProps | no | iOS/Android | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------ | ------------------------------------------------------------ | ------------------- | -------- | ----------- | ----------------- | +| dataSet | set of list items | array | no | iOS/Android | yes | +| initialValue | string (id) or object that contain id | object \| string | no | iOS/Android | yes | +| loading | loading state | boolean | no | iOS/Android | yes | +| useFilter | whether use local filter by dataSet (useful set to false for remote filtering to prevent rerender twice) | boolean | no | iOS/Android | yes | +| showClear | show clear button | boolean | no | iOS/Android | yes | +| showChevron | show chevron (open/close) button | boolean | no | iOS/Android | yes | +| closeOnSubmit | sets the max stroke line width | boolean | no | iOS/Android | yes | +| clearOnFocus | whether to clear typed text on focus | boolean | no | iOS/Android | yes | +| caseSensitive | whether to perform case-sensitive search | boolean | no | iOS/Android | yes | +| ignoreAccents | ignore diacritics | boolean | no | iOS/Android | yes | +| trimSearchText | trim the searched text | boolean | no | iOS/Android | yes | +| editable | is textInput editable | boolean | no | iOS/Android | yes | +| debounce | wait ms before call onChangeText | number | no | iOS/Android | yes | +| suggestionsListMaxHeight | max height of dropdown | number | no | iOS/Android | yes | +| direction | "up" or "down" | up \| down | no | iOS/Android | yes | +| matchFrom | whether match suggestions from start of titles or anywhere in the title. Possible values are "any" or "start" | any \| start | no | iOS/Android | yes | +| onChangeText | event textInput onChangeText | function | no | iOS/Android | yes | +| onSelectItem | event onSelectItem | function | no | iOS/Android | yes | +| onOpenSuggestionsList | event onOpenSuggestionsList | function | no | iOS/Android | yes | +| onChevronPress | event onChevronPress | function | no | iOS/Android | yes | +| onClear | event on clear button press | function | no | iOS/Android | yes | +| onSubmit | event on submit KB button press | function | no | iOS/Android | yes | +| onBlur | event fired on text input blur | function | no | iOS/Android | yes | +| onFocus | event on focus text input | function | no | iOS/Android | yes | +| renderItem | JSX for render item (item, searchText) => JSX | function | no | iOS/Android | yes | +| controller | return reference to module controller with methods close, open, toggle, clear, setInputText, setItem | function | no | iOS/Android | yes | +| containerStyle | containerStyle | ViewStyle | no | iOS/Android | yes | +| inputContainerStyle | custom input container style | ViewStyle | no | iOS/Android | yes | +| rightButtonsContainerStyle | rightButtonsContainerStyle | ViewStyle | no | iOS/Android | yes | +| suggestionsListContainerStyle | suggestionsListContainerStyle | ViewStyle | no | iOS/Android | yes | +| suggestionsListTextStyle | suggestionsListTextStyle | TextStyle | no | iOS/Android | yes | +| rightIconComponent | custom chevron icon | React.Component | no | iOS/Android | yes | +| ChevronIconComponent | Chevron Custom Icon | React.Component | no | iOS/Android | yes | +| ClearIconComponent | Clear Custom Icon | React.Component | no | iOS/Android | yes | +| EmptyResultComponent | replace the default `` Component on empty result | React.Component | no | iOS/Android | yes | +| InputComponent | input element component | React.ComponentType | no | iOS/Android | yes | +| emptyResultText | replace the default "Nothing found" text on empty result | string | no | iOS/Android | yes | +| textInputProps | text input props | TextInputProps | no | iOS/Android | yes | +| flatListProps | props for \ component | FlatListProps | no | iOS/Android | yes | +| caseSensitive4.3.1+ | whether to perform case-sensitive search | bool | no | iOS/Android | yes | +| editable4.3.1+ | is textInput editable | bool | no | iOS/Android | yes | ## 遗留问题 diff --git a/zh-cn/react-native-canvas.md b/zh-cn/react-native-canvas.md index 515e9ada2..c86ff8d59 100644 --- a/zh-cn/react-native-canvas.md +++ b/zh-cn/react-native-canvas.md @@ -18,6 +18,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 0.1.39 | 0.72 | +| 0.1.40 | 0.77 | + 进入到工程目录并输入以下命令： @@ -25,13 +30,21 @@ #### **npm** ```bash +# V0.1.39 npm install react-native-canvas@0.1.39 + +# V0.1.40 +npm install react-native-canvas@0.1.40 ``` #### **yarn** ```bash +# V0.1.39 yarn add react-native-canvas@0.1.39 + +# V0.1.40 +yarn add react-native-canvas@0.1.40 ``` [!TIP] 如果依赖未完全安装，请执行： diff --git a/zh-cn/react-native-collapsible.md b/zh-cn/react-native-collapsible.md index 82e39d338..8bf7b1343 100644 --- a/zh-cn/react-native-collapsible.md +++ b/zh-cn/react-native-collapsible.md @@ -17,6 +17,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 1.6.1 | 0.72 | +| 1.6.2 | 0.77 | + 进入到工程目录并输入以下命令： @@ -24,13 +29,21 @@ #### **npm** ```bash +# V1.6.1 npm install react-native-collapsible@1.6.1 + +# V1.6.2 +npm install react-native-collapsible@1.6.2 ``` #### **yarn** ```bash +# V1.6.1 yarn add react-native-collapsible@1.6.1 + +# V1.6.2 +yarn add react-native-collapsible@1.6.2 ``` @@ -100,14 +113,14 @@ const CONTENT = [ #### Collapsible | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| **`align`** | Alignment of the content when transitioning, can be `top`, `center` or `bottom` | enum | no | All | yes | -| **`collapsed`** | Whether to show the child components or not | boolean | no | All | yes | -| **`collapsedHeight`** | Which height should the component collapse to | number | no | All | yes | -| **`enablePointerEvents`** | Enable pointer events on collapsed view | boolean | no | All | yes | -| **`duration`** | Duration of transition in milliseconds | number | no | All | yes | +| **`align`** | Alignment of the content when transitioning, can be `top`, `center` or `bottom` | enum | no | All | yes | +| **`collapsed`** | Whether to show the child components or not | boolean | no | All | yes | +| **`collapsedHeight`** | Which height should the component collapse to | number | no | All | yes | +| **`enablePointerEvents`** | Enable pointer events on collapsed view | boolean | no | All | yes | +| **`duration`** | Duration of transition in milliseconds | number | no | All | yes | | **`easing`** | Function or function name from [`Easing`](https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js) (or [`tween-functions`](https://github.com/chenglou/tween-functions) if < RN 0.8). Collapsible will try to combine `Easing` functions for you if you name them like `tween-functions`. | string \| function | no | All | yes | -| **`renderChildrenCollapsed`** | Render children in collapsible even if not visible. | boolean | no | All | yes | -| **`style`** | Optional styling for the container | object | no | All | yes | +| **`renderChildrenCollapsed`** | Render children in collapsible even if not visible. | boolean | no | All | yes | +| **`style`** | Optional styling for the container | object | no | All | yes | | **`onAnimationEnd`** | Callback when the toggle animation is done. Useful to avoid heavy layouting work during the animation | function | no | All | yes | #### Accordion @@ -141,4 +154,5 @@ const CONTENT = [ ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/oblador/react-native-collapsible/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +本项目基于 [The MIT License (MIT)](https://github.com/oblador/react-native-collapsible/blob/master/LICENSE) ，请自由地享受和参与开源。 + diff --git a/zh-cn/react-native-community-hooks.md b/zh-cn/react-native-community-hooks.md index e250b201f..30b6fa29d 100644 --- a/zh-cn/react-native-community-hooks.md +++ b/zh-cn/react-native-community-hooks.md @@ -16,6 +16,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 3.0.0 | 0.72 | +| 3.1.0 | 0.77 | + 进入到工程目录并输入以下命令： @@ -23,13 +28,21 @@ #### npm ```bash +# V3.0.0 npm install @react-native-community/hooks@3.0.0 + +# V3.1.0 +npm install @react-native-community/hooks@3.1.0 ``` #### yarn ```bash +# V3.0.0 yarn add @react-native-community/hooks@3.0.0 + +# V3.1.0 +yarn add @react-native-community/hooks@3.1.0 ``` @@ -150,7 +163,8 @@ const styles = StyleSheet.create({ | useLayout | Returns the x-axis and y-axis coordinates of an element and the width and height of the element. | Function | False | Android / iOS | Yes | | useRefresh | pull down to refresh. | Function | False | Android / iOS | Yes | -useAccessibilityInfo 方法返回值 +**useAccessibilityInfo 方法返回值** + | Name | Description | Platform | HarmonyOS Support | |----------------|-------------------------------| -------- | ----------------- | | isBoldTextEnabled | whether bold text is enabled | iOS | Yes | diff --git a/zh-cn/react-native-confirmation-code-field.md b/zh-cn/react-native-confirmation-code-field.md index 58c1b116a..b0ebfb49d 100644 --- a/zh-cn/react-native-confirmation-code-field.md +++ b/zh-cn/react-native-confirmation-code-field.md @@ -16,16 +16,31 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 7.3.2 | 0.72 | +| 8.0.0 | 0.77 | + +进入到工程目录并输入以下命令： + #### **npm** ```bash +# V7.3.2 npm install react-native-confirmation-code-field@7.3.2 + +# V8.0.0 +npm install react-native-confirmation-code-field@8.0.0 ``` #### **yarn** ```bash +# V7.3.2 yarn add react-native-confirmation-code-field@7.3.2 + +# V8.0.0 +yarn add react-native-confirmation-code-field@8.0.0 ``` diff --git a/zh-cn/react-native-copilot.md b/zh-cn/react-native-copilot.md index 9d088a2be..a0c17d552 100644 --- a/zh-cn/react-native-copilot.md +++ b/zh-cn/react-native-copilot.md @@ -17,6 +17,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 3.3.2 | 0.72 | +| 3.3.3 | 0.77 | + 进入到工程目录并输入以下命令： @@ -24,13 +29,21 @@ #### **npm** ```bash +# V3.3.2 npm install --save react-native-copilot@3.3.2 + +# V3.3.3 +npm install --save react-native-copilot@3.3.3 ``` #### **yarn** ```bash +# V3.3.2 yarn add react-native-copilot@3.3.2 + +# V3.3.3 +yarn add react-native-copilot@3.3.3 ``` diff --git a/zh-cn/react-native-dotenv.md b/zh-cn/react-native-dotenv.md index 9352f90be..a54f982a2 100644 --- a/zh-cn/react-native-dotenv.md +++ b/zh-cn/react-native-dotenv.md @@ -16,7 +16,10 @@ ## 安装与使用 - +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 3.4.9 | 0.72 | +| 3.4.11 | 0.77 | 进入到工程目录并输入以下命令： @@ -25,13 +28,21 @@ #### **npm** ```bash - npm install -D react-native-dotenv@3.4.9 +# V3.4.9 +npm install -D react-native-dotenv@3.4.9 + +# V3.4.11 +npm install -D react-native-dotenv@3.4.11 ``` #### **yarn** ```bash +# V3.4.9 yarn add -D react-native-dotenv@3.4.9 + +# V3.4.11 +yarn add -D react-native-dotenv@3.4.11 ``` diff --git a/zh-cn/react-native-drop-shadow.md b/zh-cn/react-native-drop-shadow.md index 1f2303ef9..25b4e2d36 100644 --- a/zh-cn/react-native-drop-shadow.md +++ b/zh-cn/react-native-drop-shadow.md @@ -17,18 +17,33 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 1.0.0 | 0.72 | +| 1.0.3 | 0.77 | + +进入到工程目录并输入以下命令： + #### **npm** ```bash +# V1.0.0 npm install react-native-drop-shadow@1.0.0 + +# V1.0.3 +npm install react-native-drop-shadow@1.0.3 ``` #### **yarn** ```bash +# V1.0.0 yarn add react-native-drop-shadow@1.0.0 + +# V1.0.3 +yarn add react-native-drop-shadow@1.0.3 ``` @@ -137,11 +152,11 @@ react-native-harmony: 0.72.33; SDK: Openharmony 5.0.0.71(API Version 12 Release) | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| style | 设置阴影的样式，可以使用常规的样式属性 | style | no | Android/IOS | yes | -| shadowColor | 设置阴影的颜色，可以使用CSS颜色值或RGBA值 | string | no | Android/IOS | yes | -| shadowOffset | 设置阴影的偏移量 | number | no | Android/IOS | yes | -| shadowOpacity | 设置阴影的不透明度，取值范围为0到1之间，0表示完全透明，1表示完全不透明 | number | no | Android/IOS | yes | -| shadowRadius | 设置阴影的模糊半径，用于控制阴影的模糊程度 | number | no | Android/IOS | yes | +| `style` | 设置阴影的样式，可以使用常规的样式属性 | style | no | Android/IOS | yes | +| `shadowColor` | 设置阴影的颜色，可以使用CSS颜色值或RGBA值 | string | no | Android/IOS | yes | +| `shadowOffset` | 设置阴影的偏移量 | number | no | Android/IOS | yes | +| `shadowOpacity` | 设置阴影的不透明度，取值范围为0到1之间，0表示完全透明，1表示完全不透明 | number | no | Android/IOS | yes | +| `shadowRadius` | 设置阴影的模糊半径，用于控制阴影的模糊程度 | number | no | Android/IOS | yes | ## 遗留问题 diff --git a/zh-cn/react-native-echarts-pro.md b/zh-cn/react-native-echarts-pro.md index 93867584d..e2fe39ee7 100644 --- a/zh-cn/react-native-echarts-pro.md +++ b/zh-cn/react-native-echarts-pro.md @@ -13,6 +13,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 1.9.1 | 0.72 | +| 1.9.3 | 0.77 | + 进入到工程目录并输入以下命令： @@ -22,13 +27,21 @@ #### npm ```bash +# 0.72 npm install react-native-echarts-pro@^1.9.1 + +# 0.77 +npm install react-native-echarts-pro@1.9.3 ``` #### yarn ```bash +# 0.72 yarn add react-native-echarts-pro@^1.9.1 + +# 0.77 +yarn add react-native-echarts-pro@1.9.3 ``` @@ -102,20 +115,21 @@ export default function RNEPDemo() { ### Properties for all react-native-echarts-pro components: -| Name | Description | **Type** | Platform | Required | HarmonyOS Support | -| ------------------------- | ------------------------------------------------------------------------------------------------------------ | -------- | ----------- | -------- | ----------------- | -| height | Chart area height | Number | All | Y | Yes | -| width | Chart area auto | Number | All | N | Yes | -| option | Chart configuration, see more：[Apache ECharts - options](https://echarts.apache.org/en/option.html#title) | Object | All | Y | Yes | -| backgroundColor | Chart background color | String | All | N | Yes | -| themeName | There are only six officially available themes:
`vintage` `dark` `macarons` `infographic` `shine` `roma` | String | All | N | Yes | -| webViewSettings | Customize WebView container properties | Object | All | N | Yes | -| formatterVariable | If option’formatter function need variable,can use this. | Object | All | N | Yes | -| extension | Dynamic support for tripartite expansion, such as word cloud, water polo map, etc. example. | object | All | N | Yes | -| customMapData | For custom maps, null is a world map. See the following usage examples | Object | All | N | Yes | -| eventActions | Custom charts events. | Object | All | N | Yes | -| fontFamilies | Custom font families. | Array | Android/ios | N | No | -| enableParseStringFunction | If enabled, function are parse as strings | Boolean | All | N | Yes | +| Name | Description | **Type** | Platform | Required | HarmonyOS Support | +| --------------------------- | ------------------------------------------------------------ | -------- | ----------- | -------- | ----------------- | +| height | Chart area height | Number | All | Y | Yes | +| width | Chart area auto | Number | All | N | Yes | +| option | Chart configuration, see more：[Apache ECharts - options](https://echarts.apache.org/en/option.html#title) | Object | All | Y | Yes | +| backgroundColor | Chart background color | String | All | N | Yes | +| themeName | There are only six officially available themes:
`vintage` `dark` `macarons` `infographic` `shine` `roma` | String | All | N | Yes | +| webViewSettings | Customize WebView container properties | Object | All | N | Yes | +| formatterVariable | If option’formatter function need variable,can use this. | Object | All | N | Yes | +| extension | Dynamic support for tripartite expansion, such as word cloud, water polo map, etc. example. | object | All | N | Yes | +| customMapData | For custom maps, null is a world map. See the following usage examples | Object | All | N | Yes | +| eventActions | Custom charts events. | Object | All | N | Yes | +| fontFamilies | Custom font families. | Array | Android/ios | N | No | +| enableParseStringFunction | If enabled, function are parse as strings | Boolean | All | N | Yes | +| renderMode1.9.3+ | Used to specify the rendering method for ECharts | String | All | N | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-element-dropdown.md b/zh-cn/react-native-element-dropdown.md index 2268b9094..0da58b675 100644 --- a/zh-cn/react-native-element-dropdown.md +++ b/zh-cn/react-native-element-dropdown.md @@ -16,6 +16,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 2.12.1 | 0.72 | +| 2.12.4 | 0.77 | + 进入到工程目录并输入以下命令： @@ -23,13 +28,21 @@ #### **npm** ```bash +# V2.12.1 npm install react-native-element-dropdown@2.12.1 + +# V2.12.4 +npm install react-native-element-dropdown@2.12.4 ``` #### **yarn** ```bash +# V2.12.1 yarn add react-native-element-dropdown@2.12.1 + +# V2.12.4 +yarn add react-native-element-dropdown@2.12.4 ``` @@ -365,6 +378,7 @@ yarn add react-native-element-dropdown@2.12.1 | searchQuery | Callback used to filter the list of items | (keyword: string, labelValue: string) => Boolean| No | All | Yes | | inputSearchStyle | Styling for input search | ViewStyle | No | All | Yes | | searchPlaceholder | The string that will be rendered before text input has been entered | String | No | All | Yes | +| searchPlaceholderTextColor2.12.4+ | The text color of the placeholder string | String | No | All | Yes | | renderInputSearch | Customize TextInput search | (onSearch: (text:string) => void) => JSX.Element| No | All | Yes | | disable | Specifies the disabled state of the Dropdown | Boolean | No | All | Yes | | dropdownPosition | Dropdown list position. Default is 'auto' | 'auto' or 'top' or 'bottom' | No | All | Yes | @@ -423,6 +437,7 @@ yarn add react-native-element-dropdown@2.12.1 | searchQuery | Callback used to filter the list of items | (keyword: string, labelValue: string) => Boolean | No | All | Yes | | inputSearchStyle | Styling for input search | ViewStyle | No | All | Yes | | searchPlaceholder | The string that will be rendered before text input has been entered | String | No | All | Yes | +| searchPlaceholderTextColor2.12.4+ | The text color of the placeholder string | String | No | All | Yes | | renderInputSearch | Customize TextInput search | (onSearch: (text:string) => void) => JSX.Element | No | All | Yes | | disable | Specifies the disabled state of the Dropdown | Boolean | No | All | Yes | | dropdownPosition | Dropdown list position. Default is 'auto' | 'auto' or 'top' or 'bottom' | No | All | Yes | diff --git a/zh-cn/react-native-error-boundary.md b/zh-cn/react-native-error-boundary.md index cff2fdb41..7d42ac7cf 100644 --- a/zh-cn/react-native-error-boundary.md +++ b/zh-cn/react-native-error-boundary.md @@ -17,6 +17,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 1.2.4 | 0.72 | +| 1.2.9 | 0.77 | + 进入到工程目录并输入以下命令： @@ -24,13 +29,21 @@ #### **npm** ```bash +# V1.2.4 npm i react-native-error-boundary@1.2.4 + +# V1.2.9 +npm i react-native-error-boundary@1.2.9 ``` #### **yarn** ```bash +# V1.2.4 yarn add react-native-error-boundary@1.2.4 + +# V1.2.9 +yarn add react-native-error-boundary@1.2.9 ``` diff --git a/zh-cn/react-native-paper.md b/zh-cn/react-native-paper.md index fe49d82d9..4d15adfcf 100644 --- a/zh-cn/react-native-paper.md +++ b/zh-cn/react-native-paper.md @@ -15,20 +15,38 @@ > [!TIP] [Github 地址](https://github.com/callstack/react-native-paper/tree/v5.12.3) - ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 5.12.3 | 0.72 | +| 5.14.5 | 0.77 | + +进入到工程目录并输入以下命令： + #### **yarn** ```bash +# V5.12.3 yarn add react-native-paper@5.12.3 ``` + +```bash +# V5.14.5 +yarn add react-native-paper@5.14.5 +``` #### **npm** ```bash +# V5.12.3 npm install react-native-paper@5.12.3 ``` +```bash +# V5.14.5 +npm install react-native-paper@5.14.5 +``` + **下面的代码展示了这个库的基本使用场景：** @@ -37,7 +55,7 @@ npm install react-native-paper@5.12.3 paper使用需要安装react-native-safe-area-context来处理安全区域。另外还需要依赖react-native-vector-icons库，具体来说，MaterialCommunityIcons图标包需要包含在项目中，因为有些组件在内部使用它。 -1.将根组件包装在PaperProvider中。如果您有一个原始的 React Native 项目，最好将其添加到传递给 的组件中AppRegistry.registerComponent。这通常在index.js文件中 +1.将根组件包装在PaperProvider中。如果您有一个原始的 React Native 项目，最好将其添加到传递给入口文件的AppRegistry.registerComponent。这通常在index.js文件中 ```js import { AppRegistry } from 'react-native'; @@ -552,7 +570,8 @@ export default function App() { | labelStyle | Style for the button text. | StyleProp | NO | All | Yes | | theme | theme | ThemeProp | NO | All | Yes | | touchableRef | Reference for the touchable | React.RefObject | NO | All | Yes | -| testID | string | testID to be used on tests. | NO | All | Yes | +| testID | string | testID to be used on tests. | NO | All | Yes | +| hitSlop15.4.5+ | Sets additional distance outside of element in which a press can be detected. | TouchableRippleProps['hitSlop'] | NO | All | Yes | **Card**：A card is a sheet of material that serves as an entry point to more detailed information. | Name | Description | Type | Required | Platform | HarmonyOS Support | @@ -567,7 +586,7 @@ export default function App() { | disabled | TIf true, disable all interactions for this component. | boolean | NO | All | Yes | | elevation | Changes Card shadow and background on iOS and Android. | Animated.Value | NO | All | Yes | | contentStyle | Style of card's inner content. | StyleProp | NO | All | Yes | -| style | style | StyleProp | NO | All | Yes | +| style | style | Animated.WithAnimatedValue> | NO | All | Yes | | theme | theme | ThemeProp | NO | All | Yes | | testID | Pass down testID from card props to touchable | string | NO | All | Yes | | accessible | Pass down accessible from card props to touchable | boolean | NO | All | Yes | @@ -671,6 +690,7 @@ export default function App() { | testID | string | ThemeProp | NO | All | Yes | | position | Checkbox control position. | leading \| trailing | NO | All | Yes | | mode | Whether or should be used. Left undefined will be used. | android \| ios | NO | All | Yes | +| hitSlop15.4.5+ | Sets additional distance outside of element in which a press can be detected. | TouchableRippleProps['hitSlop'] | NO | All | Yes | **Chip**：Chips are compact elements that can represent inputs, attributes, or actions @@ -705,6 +725,7 @@ export default function App() { | ellipsizeMode | Ellipsize Mode for the children text | EllipsizeProp | NO | All | Yes | | maxFontSizeMultiplier | Specifies the largest possible scale a text font can reach. | number | NO | All | Yes | | accessibilityRole | Default value: 'button' | string | NO | All | Yes | +| hitSlop15.4.5+ | Sets additional distance outside of element in which a press can be detected. | TouchableRippleProps['hitSlop'] | NO | All | Yes | **DataTable**：Data tables allow displaying sets of data. @@ -784,7 +805,7 @@ export default function App() { | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :---------: | :-------------: | -------- | -------- | ----------------- | | dismissable | Determines whether clicking outside the dialog dismiss it. | boolean | NO | All | Yes | -| dismissableBackButton | Determines whether clicking Android hardware back button dismiss dialog. | boolean | NO | All | Yes | +| dismissableBackButton | Determines whether clicking Android hardware back button dismiss dialog. | boolean | NO | All | NO | | onDismiss | Callback that is called when the user dismisses the dialog. | () => void | NO | All | Yes | | visible | Determines Whether the dialog is visible. | boolean | NO | All | Yes | | children (required) | Content of the Dialog | React.ReactNode | Yes | All | Yes | @@ -865,6 +886,7 @@ export default function App() { | rippleColor | Color of the ripple effect. | ColorValue | NO | All | Yes | | style | style | StyleProp | NO | All | Yes | | theme | theme | ThemeProp | NO | All | Yes | +| hitSlop15.4.5+ | Sets additional distance outside of element in which a press can be detected. | TouchableRippleProps['hitSlop'] | NO | All | Yes | **Drawer.Section**：A component to group content inside a navigation drawer. | Name | Description | Type | Required | Platform | HarmonyOS Support | @@ -929,6 +951,7 @@ export default function App() { | style | style | StyleProp | NO | All | Yes | | theme | theme | ThemeProp | NO | All | Yes | | testID | TestID used for testing purposes | string | NO | All | Yes | +| hitSlop15.4.5+ | Sets additional distance outside of element in which a press can be detected. | TouchableRippleProps['hitSlop'] | NO | All | Yes | **FAB.Group**：A component to display a stack of FABs with related actions in a speed dial. | Name | Description | Type | Required | Platform | HarmonyOS Support | @@ -991,6 +1014,7 @@ export default function App() { | theme | theme | ThemeProp | NO | All | Yes | | testID | TestID used for testing purposes | string | NO | All | Yes | | loading | Whether to show a loading indicator. | boolean | NO | All | Yes | +| contentStyle15.4.5+ | Style of button's inner content. Use this prop to apply custom height and width or to set a custom padding`. | StyleProp | NO | All | Yes | **List.Accordion**：A component used to display an expandable list item. | Name | Description | Type | Required | Platform | HarmonyOS Support | @@ -1017,6 +1041,9 @@ export default function App() { | testID | TestID used for testing purposes | string | NO | All | Yes | | accessibilityLabel | Accessibility label for the TouchableRipple. This is read by the screen reader when the user taps the touchable. | string | NO | All | Yes | | pointerEvents | pointerEvents passed to the View container | ViewProps['pointerEvents'] | NO | Android | NO | +| hitSlop15.4.5+ | Sets additional distance outside of element in which a press can be detected. | TouchableRippleProps['hitSlop'] | NO | All | Yes | +| contentStyle15.4.5+ | Style of button's inner content. Use this prop to apply custom height and width or to set a custom padding`. | StyleProp | NO | All | Yes | +| containerStyle15.4.5+ | Style that is passed to the outermost container that wraps the entire content, including left and right items and both title and description. | StyleProp | NO | All | Yes | **List.AccordionGroup**：List.AccordionGroup allows to control a group of List Accordions. | Name | Description | Type | Required | Platform | HarmonyOS Support | @@ -1053,6 +1080,7 @@ export default function App() { | descriptionMaxFontSizeMultiplier | Specifies the largest possible scale a description font can reach. | number | NO | All | Yes | | descriptionEllipsizeMode | Ellipsize Mode for the Description. One of 'head', 'middle', 'tail', 'clip'. | 'head' 'middle' 'tail' 'clip' | NO | All | Yes | | testID | TestID used for testing purposes | string | NO | All | Yes | +| containerStyle15.4.5+ | Style that is passed to the outermost container that wraps the entire content, including left and right items and both title and description. | StyleProp | NO | All | Yes | **List.Section**：A component used to group list items. | Name | Description | Type | Required | Platform | HarmonyOS Support | @@ -1082,7 +1110,7 @@ export default function App() { | children (required) | Content of the Menu | React.ReactNode | Yes | All | Yes | | style | style | StyleProp | NO | All | Yes | | contentStyle | Style of menu's inner content. | Animated.WithAnimatedValue> | NO | All | Yes | -| theme | theme | InternalTheme | NO | All | Yes | +| theme | theme | ThemeProp | NO | All | Yes | | keyboardShouldPersistTaps | Inner ScrollView prop | crollViewProps['keyboardShouldPersistTaps'] | NO | All | Yes | | testID | testID to be used on tests. | string | NO | All | Yes | @@ -1101,16 +1129,18 @@ export default function App() { | contentStyle | contentStyle | StyleProp | NO | All | Yes | | titleStyle | titleStyle | StyleProp | NO | All | Yes | | rippleColor | titleStyle | ColorValue | NO | All | Yes | -| theme | Color of the ripple effect. | InternalTheme | NO | All | Yes | +| theme | Color of the ripple effect. | ThemeProp | NO | All | Yes | | testID | TestID used for testing purposes| string | NO | All | Yes | | accessibilityLabel | Accessibility label for the Touchable. | string | NO | All | Yes | | accessibilityState | Accessibility state for the Touchable. | accessibilityState | NO | All | Yes | +| hitSlop15.4.5+ | Sets additional distance outside of element in which a press can be detected. | TouchableRippleProps['hitSlop'] | NO | All | Yes | +| containerStyle15.4.5+ | Style that is passed to the outermost container that wraps the entire content, including left and right items and both title and description. | StyleProp | NO | All | Yes | **Modal**：The Modal component is a simple way to present content above an enclosing view. | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :---------: | :-------------: | -------- | -------- | ----------------- | | dismissable | Determines whether clicking outside the modal dismiss it. | boolean | NO | All | Yes | -| dismissableBackButton | Determines whether clicking Android hardware back button dismiss dialog. | boolean | NO | All | Yes | +| dismissableBackButton | Determines whether clicking Android hardware back button dismiss dialog. | boolean | NO | Android | No | | onDismiss | Callback that is called when the user dismisses the modal.| () => void | NO | All | Yes | | overlayAccessibilityLabel | Callback that is called when the user dismisses the modal.| () => void | NO | All | Yes | | visible | Determines Whether the modal is visible. | boolean | NO | All | Yes | @@ -1185,6 +1215,7 @@ export default function App() { | testID | testID to be used on tests. | string | NO | All | Yes | | mode | Whether or should be used. Left undefined will be used. | android \| ios | NO | All | Yes | | position | Radio button control position. | leading \| trailing | NO | All | Yes | +| hitSlop15.4.5+ | Sets additional distance outside of element in which a press can be detected. | TouchableRippleProps['hitSlop'] | NO | All | Yes | **Searchbar**：Searchbar is a simple input box where users can type search queries. | Name | Description | Type | Required | Platform | HarmonyOS Support | @@ -1242,6 +1273,7 @@ export default function App() { | theme | theme | string | NO | All | Yes | | ref | ref | React.RefObject | NO | All | Yes | | testID | string | TestID used for testing purposes | NO | All | Yes | +| contentStyle15.4.5+ | Style for the content of the snackbar | StyleProp | NO | All | Yes | **Surface**：Surface is a basic container that can give depth to an element with elevation shadow. | Name | Description | Type | Required | Platform | HarmonyOS Support | @@ -1356,6 +1388,7 @@ export default function App() { | style | style | StyleProp | NO | All | Yes | **Tooltip**：Tooltips display informative text when users hover over, focus on, or tap an element. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----: | :---------: | :-------------: | -------- | -------- | ----------------- | | children (required) | Tooltip reference element. Needs to be able to hold a ref. | React.ReactElement | Yes | All | Yes | diff --git a/zh-cn/react-native-qrcode-svg.md b/zh-cn/react-native-qrcode-svg.md index 93e51b607..8bbd770bf 100644 --- a/zh-cn/react-native-qrcode-svg.md +++ b/zh-cn/react-native-qrcode-svg.md @@ -16,22 +16,33 @@ ## 安装与使用 -进入到工程目录并输入以下命令： - +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 6.2.0 | 0.72 | +| 6.3.15 | 0.77 | +进入到工程目录并输入以下命令： #### **npm** ```bash +# V6.2.0 npm install react-native-qrcode-svg@6.2.0 + +# V6.3.15 +npm install react-native-qrcode-svg@6.3.15 ``` #### **yarn** ```bash +# V6.2.0 yarn add react-native-qrcode-svg@6.2.0 + +# V6.3.15 +yarn add react-native-qrcode-svg@6.3.15 ``` @@ -88,7 +99,7 @@ export const SvgDemo = () => { | `enableLinearGradient` | enables or disables linear gradient | boolean | No | iOS,Android | yes | | `linearGradient` | array of 2 rgb colors used to create the linear gradient | string[] | No | iOS,Android | yes | | `gradientDirection` | the direction of the linear gradient | string | No | iOS,Android | yes | -| `logo` | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')} | object | No | iOS,Android | yes | +| `logo` | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')} | V6.2.0 : `object`
v6.3.15 : `ImageSourcePropType \| string` | No | iOS,Android | yes | | `logoSize` | Size of the imprinted logo. Bigger logo = less error correction in QR code | number | No | iOS,Android | yes | | `logoBackgroundColor` | The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop. | string | No | iOS,Android | yes | | `logoMargin` | logo's distance to its wrapper | number | No | iOS,Android | yes | @@ -97,6 +108,9 @@ export const SvgDemo = () => { | `getRef` | Get SVG ref for further usage | callback | No | iOS,Android | yes | | `ecl` | Error correction level | string | No | iOS,Android | yes | | `onError(error)` | Callback fired when exception happened during the code generating process | callback | No | iOS,Android | yes | +| `logoSVG`6.3.15+ | SVG to render as logo. Can be either a svg string or a React component if you're using ex: '@svgr/webpack' or similar. In case both this prop and `logo` are provided, then this prop takes precedence and `logo` will be ignored. | React.FC \| string | No | All | yes | +| `logoColor`6.3.15+ | If the logo is provided via `logoSVG` prop, this color will be set as it's `fill` property, otherwise it does nothing | string | No | All | yes | +| `testID`6.3.15+ | testID for testing | string | No | All | yes | ## 遗留问题 @@ -105,3 +119,4 @@ export const SvgDemo = () => { ## 开源协议 本项目基于 [The MIT License (MIT)](https://github.com/awesomejerry/react-native-qrcode-svg/blob/master/LICENSE) ，请自由地享受和参与开源。 + diff --git a/zh-cn/react-native-reanimated-carousel.md b/zh-cn/react-native-reanimated-carousel.md index 2d1082c0d..5650f0f05 100644 --- a/zh-cn/react-native-reanimated-carousel.md +++ b/zh-cn/react-native-reanimated-carousel.md @@ -16,6 +16,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 3.5.1 | 0.72 | +| 4.0.2 | 0.77 | + 进入到工程目录并输入以下命令： @@ -23,13 +28,21 @@ #### **npm** ```bash +# V3.5.1 npm install react-native-reanimated-carousel@3.5.1 + +# V4.0.2 +npm install react-native-reanimated-carousel@4.0.2 ``` #### **yarn** ```bash +# V3.5.1 yarn add react-native-reanimated-carousel@3.5.1 + +# V4.0.2 +yarn add react-native-reanimated-carousel@4.0.2 ``` @@ -196,39 +209,43 @@ const styles = StyleSheet.create({ ### Basic Props -| Name | Description | Required | Default | Type | Platform | HarmonyOS Support | -| ------------------------- | ------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------------- | -| data | Carousel items data set | yes | | T[] | All | yes | -| renderItem | Render carousel item | yes | | (info: { item: T, index: number, animationValue: SharedValue\ }) => React.ReactElement | All | yes | -| defaultScrollOffsetValue | The default animated value of the carousel. | no | useSharedValue(0) | boolean | All | yes | -| autoFillData | Auto fill data array to allow loop playback when the loop props is true.([1] => [1, 1, 1]；[1, 2] => [1, 2, 1, 2]) | no | true | boolean | All | yes | -| vertical | Layout items vertically instead of horizontally | no | false | boolean | All | yes | -| width | Specified carousel item width | `vertical` no `horizontal` yes | '100%' | number \| undefined | All | yes | -| height | Specified carousel item height | `vertical` yes `horizontal` no | '100%' | number \| undefined | All | yes | -| mode | Carousel Animated transitions | no | default | 'horizontal-stack'\|'vertical-stack'\|'parallax' | All | yes | -| modeConfig | Stack layout animation style. Different modes correspond to different configurations | no | { snapDirection: 'left',moveSize: window.width,stackInterval: 30,scaleInterval: 0.08,rotateZDeg: 135} | | All | yes | -| style | Carousel container style | no | {} | ViewStyle | All | yes | -| defaultIndex | Default index | no | 0 | number | All | yes | -| autoPlay | Auto play | no | false | boolean | All | yes | -| autoPlayReverse | Auto play reverse playback | no | false | boolean | All | yes | -| autoPlayInterval | Auto play playback interval | no | 1000 | number | All | yes | -| scrollAnimationDuration | Time a scroll animation takes to finish | no | 500 | number | All | yes | -| loop | Carousel loop playback | no | true | boolean | All | yes | -| testID | Used to locate this view in end-to-end tests | no | | string | All | yes | -| onSnapToItem | Callback fired when navigating to an item | no | | (index: number) => void | All | yes | -| onScrollBegin | Callback fired when scroll begin | no | | () => void | All | yes | -| onScrollEnd | Callback fired when scroll end | no | | (index: number) => void | All | yes | -| withAnimation | Specifies the scrolling animation effect | no | | {type: 'spring';config: WithSpringConfig;} \| {type: 'timing';config: WithTimingConfig;} | All | yes | -| panGestureHandlerProps | PanGestureHandler props | no | {} | Omit,'onHandlerStateChange'> | All | yes | -| windowSize | The maximum number of items that can respond to pan gesture events, `0` means all items will respond to pan gesture events | no | 0 | number | All | yes | -| onProgressChange | On progress change. `offsetProgress`:Total of offset distance (0 390 780 ...); `absoluteProgress`:Convert to index (0 1 2 ...) | no | | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | All | yes | -| pagingEnabled | When true, the scroll view stops on multiples of the scroll view's size when scrolling | no | true | boolean | All | yes | -| overscrollEnabled | If enabled, the item will scroll to the first placement when scrolling past the edge rather than closing to the last. (previous conditions: loop=false) | no | true | boolean | All | yes | -| snapEnabled | If enabled, releasing the touch will scroll to the nearest item, valid when pagingEnabled=false | no | true | boolean | All | yes | -| enabled | when false, Carousel will not respond to any gestures | no | true | boolean | All | yes | -| customConfig | Custom carousel config | no | | () => {type?: 'negative' \| 'positive';viewCount?: number;} | All | yes | -| customAnimation | Custom animations | no | | (value: number) => Animated.AnimatedStyleProp | All | yes | -| maxScrollDistancePerSwipe | Maximum offset value for one scroll. If `props.vertical = true`, this will be `maxScrollDistancePerSwipeY`. If `props.vertical = false`, this will be `maxScrollDistancePerSwipeX`. | no | | number | All | yes | +| Name | Description | Required | Default | Type | Platform | HarmonyOS Support | +| ------------------------------------------------------ | ------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------------- | +| data | Carousel items data set | yes | | T[] | All | yes | +| renderItem | Render carousel item | yes | | (info: { item: T, index: number, animationValue: SharedValue\ }) => React.ReactElement | All | yes | +| defaultScrollOffsetValue | The default animated value of the carousel. | no | useSharedValue(0) | boolean | All | yes | +| autoFillData | Auto fill data array to allow loop playback when the loop props is true.([1] => [1, 1, 1]；[1, 2] => [1, 2, 1, 2]) | no | true | boolean | All | yes | +| vertical | Layout items vertically instead of horizontally | no | false | boolean | All | yes | +| width | Specified carousel item width | `vertical` no `horizontal` yes | '100%' | number \| undefined | All | yes | +| height | Specified carousel item height | `vertical` yes `horizontal` no | '100%' | number \| undefined | All | yes | +| mode | Carousel Animated transitions | no | default | 'horizontal-stack'\|'vertical-stack'\|'parallax' | All | yes | +| modeConfig | Stack layout animation style. Different modes correspond to different configurations | no | { snapDirection: 'left',moveSize: window.width,stackInterval: 30,scaleInterval: 0.08,rotateZDeg: 135} | | All | yes | +| style | Carousel container style | no | {} | ViewStyle | All | yes | +| defaultIndex | Default index | no | 0 | number | All | yes | +| autoPlay | Auto play | no | false | boolean | All | yes | +| autoPlayReverse | Auto play reverse playback | no | false | boolean | All | yes | +| autoPlayInterval | Auto play playback interval | no | 1000 | number | All | yes | +| scrollAnimationDuration | Time a scroll animation takes to finish | no | 500 | number | All | yes | +| loop | Carousel loop playback | no | true | boolean | All | yes | +| testID | Used to locate this view in end-to-end tests | no | | string | All | yes | +| onSnapToItem | Callback fired when navigating to an item | no | | (index: number) => void | All | yes | +| onScrollBegin3.5.1 | Callback fired when scroll begin | no | | () => void | All | yes | +| onScrollStart4.0.2 | Callback fired when scroll begin | no | | () => void | All | yes | +| onScrollEnd | Callback fired when scroll end | no | | (index: number) => void | All | yes | +| withAnimation | Specifies the scrolling animation effect | no | | {type: 'spring';config: WithSpringConfig;} \| {type: 'timing';config: WithTimingConfig;} | All | yes | +| panGestureHandlerPropsdeprecated from 4.0.2 | PanGestureHandler props | no | {} | Omit,'onHandlerStateChange'> | All | yes | +| windowSize | The maximum number of items that can respond to pan gesture events, `0` means all items will respond to pan gesture events | no | 0 | number | All | yes | +| onProgressChange | On progress change. `offsetProgress`:Total of offset distance (0 390 780 ...); `absoluteProgress`:Convert to index (0 1 2 ...) | no | | onProgressChange?: (offsetProgress: number,absoluteProgress: number) => void | All | yes | +| pagingEnabled | When true, the scroll view stops on multiples of the scroll view's size when scrolling | no | true | boolean | All | yes | +| overscrollEnabled | If enabled, the item will scroll to the first placement when scrolling past the edge rather than closing to the last. (previous conditions: loop=false) | no | true | boolean | All | yes | +| snapEnabled | If enabled, releasing the touch will scroll to the nearest item, valid when pagingEnabled=false | no | true | boolean | All | yes | +| enabled | when false, Carousel will not respond to any gestures | no | true | boolean | All | yes | +| customConfig | Custom carousel config | no | | () => {type?: 'negative' \| 'positive';viewCount?: number;} | All | yes | +| customAnimation | Custom animations | no | | (value: number) => Animated.AnimatedStyleProp | All | yes | +| maxScrollDistancePerSwipe | Maximum offset value for one scroll. If `props.vertical = true`, this will be `maxScrollDistancePerSwipeY`. If `props.vertical = false`, this will be `maxScrollDistancePerSwipeX`. | no | | number | All | yes | +| fixedDirection4.0.2+ | If positive, the carousel will scroll to the positive direction and vice versa. | no | | 'positive' \| 'negative | All | yes | +| onConfigurePanGesture4.0.2+ | PanGesture config | no | | onConfigurePanGesture?: (panGesture: PanGesture) => void | All | yes | +| minScrollDistancePerSwipe4.0.2+ | Minimum offset value for once scroll. If the translation value is less than this value, the carousel will not scroll. | no | | number | All | yes | ### `modeConfig` Parallax diff --git a/zh-cn/react-native-reanimated-table.md b/zh-cn/react-native-reanimated-table.md index fdad8be87..a03a0d200 100644 --- a/zh-cn/react-native-reanimated-table.md +++ b/zh-cn/react-native-reanimated-table.md @@ -18,6 +18,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ------------- | ---------- | +| 0.0.2 | 0.72 | +| 0.2.0-alpha.1 | 0.77 | + 进入到工程目录并输入以下命令： @@ -25,13 +30,21 @@ #### npm ```bash +# V0.0.2 npm install react-native-reanimated-table@0.0.2 + +# V0.2.0-alpha.1 +npm install react-native-reanimated-table@0.2.0-alpha.1 ``` #### yarn ```bash +# V0.0.2 yarn add react-native-reanimated-table@0.0.2 + +# V0.2.0-alpha.1 +yarn add react-native-reanimated-table@0.2.0-alpha.1 ``` diff --git a/zh-cn/react-native-shadow-2.md b/zh-cn/react-native-shadow-2.md index f8789e64e..cb66c7880 100644 --- a/zh-cn/react-native-shadow-2.md +++ b/zh-cn/react-native-shadow-2.md @@ -17,6 +17,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 7.0.8 | 0.72 | +| 7.1.1 | 0.77 | + 进入到工程目录并输入以下命令： @@ -24,13 +29,21 @@ #### **npm** ```bash +# V7.0.8 npm install react-native-shadow-2@7.0.8 + +# V7.1.1 +npm install react-native-shadow-2@7.1.1 ``` #### **yarn** ```bash +# V7.0.8 yarn add react-native-shadow-2@7.0.8 + +# V7.1.1 +yarn add react-native-shadow-2@7.1.1 ``` @@ -196,10 +209,10 @@ const styles = StyleSheet.create({ | startColor | The initial gradient color of the shadow. | string | no | All | yes | | endColor | The final gradient color of the shadow. | string | no | All | yes | | distance | How far the shadow goes. | number | no | All | yes | -| offset | Moves the shadow. Negative x moves it left/start, negative y moves it up. Accepts 'x%' values. Defining this will default paintInside to true, as it's the usual desired behaviour. | [x: string \| number, y: string \| number] | no | All | yes | -| paintInside | Apply the shadow below/inside the content. startColor is used as fill color, without a gradient. Useful when using offset or if your child has some transparency. | boolean | no | All | yes | +| offset | Moves the shadow. Negative x moves it left/start, negative y moves it up. Accepts 'x%' values. Defining this will default paintInside to true, as it's the usual desired behaviour. | [x: string \| number, y: string \| number] | no | All | no | +| paintInside | Apply the shadow below/inside the content. startColor is used as fill color, without a gradient. Useful when using offset or if your child has some transparency. | boolean | no | All | no | | sides | The sides that will have their shadows drawn. Doesn't include corners. Undefined sides fallbacks to true. | Record<'start' \| 'end' \| 'top' \| 'bottom', boolean> | no | All | yes | -| corners | The corners that will have their shadows drawn. Undefined corners fallbacks to true. | Record<'topStart' \| 'topEnd' \| 'bottomStart' \| 'bottomEnd', boolean> | no | Android | yes | +| corners | The corners that will have their shadows drawn. Undefined corners fallbacks to true. | Record<'topStart' \| 'topEnd' \| 'bottomStart' \| 'bottomEnd', boolean> | no | Android | no | | style | The style of the View that wraps your children. | StyleProp | no | All | yes | | containerStyle | The style of the View that wraps the Shadow and your children. Useful for margins. | StyleProp | no | All | yes | | stretch | Make your children ocuppy all available horizontal space. | boolean | no | All | yes | diff --git a/zh-cn/react-native-testing-library.md b/zh-cn/react-native-testing-library.md index 6bbaa1ba8..81dd63f4f 100644 --- a/zh-cn/react-native-testing-library.md +++ b/zh-cn/react-native-testing-library.md @@ -15,9 +15,13 @@ > [!TIP] [Github 地址](https://github.com/callstack/react-native-testing-library) - ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 12.5.1 | 0.72 | +| 13.0.1 | 0.77 | + 本库需要和测试运行器一起使用，本文档以Jest测试框架作为示例演示。 进入到工程目录并输入以下命令： @@ -28,20 +32,32 @@ ```bash npm install -D jest@29.7.0 + +# V12.5.1 npm install -D @testing-library/react-native@12.5.1 + +# V13.0.1 +npm install -D @testing-library/react-native@13.0.1 ``` #### **yarn** ```bash yarn add -D jest@29.7.0 + +# V12.5.1 yarn add -D @testing-library/react-native@12.5.1 + +# V13.0.1 +yarn add -D @testing-library/react-native@13.0.1 ``` 配置Jest匹配器，目前有两种配置方法： +> [!TIP V12.5.1需要引入] + 方法一：在jest-setup.ts中引入： ```js @@ -50,6 +66,8 @@ import '@testing-library/react-native/extend-expect'; 方法二：在jest.config.js中配置： +> [!TIP V12.5.1需要引入] + ```json { "preset": "react-native", @@ -152,6 +170,15 @@ test('form submits two answers', async () => { | act | action | function | no | All | yes | | cleanup | Unmounts React trees that were mounted with `render` and clears `screen` variable that holds latest `render` output. | function | no | All | yes | +### RenderOptions + +| name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------------------ | ------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | +| wrapper | This option allows you to wrap the tested component, passed as the first option to the render() function, in an additional wrapper component. | function | no | All | yes | +| concurrentRoot13.0.1+ | Set to `false` to disable concurrent rendering. Otherwise, `render` will default to using concurrent rendering used in the React Native New Architecture. | boolean | no | All | yes | +| createNodeMock | This option allows you to pass `createNodeMock` option to `ReactTestRenderer.create()` method in order to allow for custom mock refs. | function | no | All | yes | +| unstable_validateStringsRenderedWithinText | This experimental option allows you to replicate React Native behavior of throwing Invariant Violation | boolean | no | All | yes | + ### screen > [!TIP] "\*"号表示省略了变体或者谓词部；查询接口由两部分组成：变体和谓词，它们之间由单词by分隔，例如: getBy\*是查询变体，\*ByRole是谓词；变体和谓词之间可以任意组合。 diff --git a/zh-cn/react-native-vector-icons.md b/zh-cn/react-native-vector-icons.md index 521336226..b873b28ac 100644 --- a/zh-cn/react-native-vector-icons.md +++ b/zh-cn/react-native-vector-icons.md @@ -17,6 +17,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 10.0.3 | 0.72 | +| 10.2.0 | 0.77 | + 进入到工程目录并输入以下命令： @@ -24,13 +29,21 @@ #### **npm** ```bash +# V10.0.3 npm install react-native-vector-icons@10.0.3 + +# V10.2.0 +npm install react-native-vector-icons@10.2.0 ``` #### **yarn** ```bash +# V10.0.3 yarn add react-native-vector-icons@10.0.3 + +# V10.2.0 +yarn add react-native-vector-icons@10.2.0 ``` diff --git a/zh-cn/react-navigation-header-buttons.md b/zh-cn/react-navigation-header-buttons.md index 2e21db17b..6348c47a9 100644 --- a/zh-cn/react-navigation-header-buttons.md +++ b/zh-cn/react-navigation-header-buttons.md @@ -17,19 +17,34 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 12.0.0 | 0.72 | +| 13.0.0 | 0.77 | + + + 进入到工程目录并输入以下命令： #### **npm** ```bash +# V12.0.0 npm i react-navigation-header-buttons@12.0.0 + +# V13.0.0 +npm i react-navigation-header-buttons@13.0.0 ``` #### **yarn** ```bash +# V12.0.0 yarn add react-navigation-header-buttons@12.0.0 + +# V13.0.0 +yarn add react-navigation-header-buttons@13.0.0 ``` diff --git a/zh-cn/reassure.md b/zh-cn/reassure.md index be29237e1..939780f70 100644 --- a/zh-cn/reassure.md +++ b/zh-cn/reassure.md @@ -19,18 +19,31 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 1.0.0 | 0.72 | +| 1.4.0 | 0.77 | + #### **npm** ```bash +# V1.0.0 npm install reassure@1.0.0 + +# V1.4.0 +npm install reassure@1.4.0 ``` #### **yarn** ```bash +# V1.0.0 yarn add reassure@1.0.0 + +# V1.4.0 +yarn add reassure@1.4.0 ``` diff --git a/zh-cn/recyclerlistview.md b/zh-cn/recyclerlistview.md index 7b8b87fb1..3c2087421 100644 --- a/zh-cn/recyclerlistview.md +++ b/zh-cn/recyclerlistview.md @@ -16,6 +16,11 @@ ## 安装与使用 +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 4.2.0 | 0.72 | +| 4.2.3 | 0.77 | + 进入到工程目录并输入以下命令： @@ -23,13 +28,21 @@ #### **npm** ```bash +# V4.2.0 npm install recyclerlistview@4.2.0 + +# V4.2.3 +npm install recyclerlistview@4.2.3 ``` #### **yarn** ```bash +# V4.2.0 yarn add recyclerlistview@4.2.0 + +# V4.2.3 +yarn add recyclerlistview@4.2.3 ``` @@ -210,6 +223,24 @@ const styles = { | 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 | iOS Android | Yes | | windowCorrectionConfig | Used to specify is window
correction config and whether
it should be applied to some
scroll events | object | No | iOS Android | Yes | +## LayoutManager4.2.3+ + +| **Name** | **Description** | **Type** | **Required** | **Platform** | HarmonyOS Support | +| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------ | ------------ | ------------ | ----------------- | +| `public removeLayout(index: number): void` | when remove layout is called, it will remove the layout from the layouts array and if the layouts array is empty, it will reset the total height and total width to 0 | function | No | All | Yes | + +## ScrollComponent4.2.3+ + +| **Name** | **Description** | **Type** | **Required** | **Platform** | HarmonyOS Support | +| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------ | ------------ | ------------ | ----------------- | +| `public getNativeScrollRef(): ScrollView | null ` | Override and return ref to your custom scrollview. Useful if you need to use Animated Events on the new architecture. | function | No | All | Yes | + +## ComponentCompat4.2.3+ + +| **Name** | **Description** | **Type** | **Required** | **Platform** | HarmonyOS Support | +| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------ | ------------ | ------------ | ----------------- | +| `public getHasRenderedOnce(): boolean` | allow the extended component to access _hasRenderedOnce flag to ensure that the component has rendered at least once | function | No | All | Yes | + ## 遗留问题 - [ ] 接口scrollThrottle不支持: [issue#785](https://github.com/Flipkart/recyclerlistview/issues/785) -- Gitee