From 3cb3f0935c70cd8acb02db1187755418c8bbcdc9 Mon Sep 17 00:00:00 2001 From: quguiren Date: Fri, 22 Aug 2025 09:48:47 +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 | 248 +++++++++++------- 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 | 13 + zh-cn/react-native-element-dropdown.md | 14 + zh-cn/react-native-error-boundary.md | 13 + zh-cn/react-native-paper.md | 44 +++- zh-cn/react-native-qrcode-svg.md | 21 +- zh-cn/react-native-reanimated-carousel.md | 100 ++++--- zh-cn/react-native-reanimated-table.md | 13 + zh-cn/react-native-shadow-2.md | 13 + zh-cn/react-native-testing-library.md | 16 +- 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 | 23 ++ 24 files changed, 600 insertions(+), 209 deletions(-) diff --git a/zh-cn/Shopify-restyle.md b/zh-cn/Shopify-restyle.md index bb821c3e..5bb4dbf8 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 e1f10ba0..5ffd5837 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?)**：对话框组件。 @@ -598,7 +635,7 @@ export default class BasicTagExample extends React.Component { **PickerView 遮罩层** -还支持自定义遮罩样式，如使用渐变组件``。当前默认为白色半透明。 +还支持自定义遮罩样式，如使用渐变组件``。当前默认为白色半Form-Instance透明。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | :--------------: | :----------------------: | :------------------------------------------------------------------------------------------: | :------: | :------: | :---------------: | @@ -693,16 +730,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 +865,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 +932,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 +1048,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 +1153,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** @@ -1143,6 +1188,9 @@ export default class BasicTagExample extends React.Component { - [ ] PickerView 组件在 harmony 暂不支持，待ArkUI规格升级之后再重新适配 - [ ] Input.TextArea 组件在 harmony 暂不支持，待ArkUI规格升级之后再重新适配 +- [ ] V5.4.2 三方库存在checkBox的bug(数据错乱，闪退)。老外已修改， + https://github.com/ant-design/ant-design-mobile-rn/pull/1434 + 待发布release版本后，再适配到鸿蒙侧 ## 其他 diff --git a/zh-cn/galio-framework.md b/zh-cn/galio-framework.md index 3542ba05..d95d9799 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 56a600c8..c2ef4d39 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 515e9ada..c86ff8d5 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 82e39d33..8bf7b134 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 e250b201..30b6fa29 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 58c1b116..b0ebfb49 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 9d088a2b..a0c17d55 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 9352f90b..a54f982a 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 1f2303ef..25b4e2d3 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 93867584..77574018 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 +# V1.9.1 npm install react-native-echarts-pro@^1.9.1 + +# V1.9.3 +npm install react-native-echarts-pro@1.9.3 ``` #### yarn ```bash +# V1.9.1 yarn add react-native-echarts-pro@^1.9.1 + +# V1.9.3 +yarn add react-native-echarts-pro@1.9.3 ``` diff --git a/zh-cn/react-native-element-dropdown.md b/zh-cn/react-native-element-dropdown.md index 2268b909..4c7f81df 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 | diff --git a/zh-cn/react-native-error-boundary.md b/zh-cn/react-native-error-boundary.md index cff2fdb4..7d42ac7c 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 84c6f9d2..f9545222 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 +``` + **下面的代码展示了这个库的基本使用场景：** @@ -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 @@ -699,12 +719,13 @@ export default function App() { | compact | Sets smaller horizontal paddings 12dp around label, when there is only label. | boolean | NO | All | Yes | | elevated | Whether chip should have the elevation. | boolean | NO | All | Yes | | textStyle | Style of chip's text | StyleProp | NO | All | Yes | -| style | style | Animated.WithAnimatedValue> | NO | All | +| style | style | Animated.WithAnimatedValue> | NO | All || | theme | theme | ThemeProp | NO | All | Yes | | testID | Pass down testID from chip props to touchable for Detox tests. | string | NO | All | Yes | | 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. @@ -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 | All | Yes | +| 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,10 +1129,12 @@ 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 | @@ -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 | diff --git a/zh-cn/react-native-qrcode-svg.md b/zh-cn/react-native-qrcode-svg.md index 93e51b60..8bbd770b 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 2d1082c0..f9ae96ee 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,42 @@ 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 | +| 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 | +| 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 | no | +| 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 @@ -240,15 +256,15 @@ const styles = StyleSheet.create({ ### `modeConfig` Stack -| Name | Description | Required | Default | Type | Platform | HarmonyOS Support | -| --------------- | ------------------------ | -------- | ------------- | --------------- | -------- | ----------------- | -| showLength | Display number | no | data.length-1 | number | All | yes | -| moveSize | Item translate size | no | screen.width | number | All | yes | -| stackInterval | The spacing of each item | no | 18 | number | All | yes | -| scaleInterval | The scale of each item | no | 0.04 | number | All | yes | -| opacityInterval | The opacity of each item | no | 0.1 | number | All | yes | -| rotateZDeg | The item rotation Angle | no | 30 | number | All | yes | -| snapDirection | Slide direction | no | 'left' | 'left'\|'right' | All | yes | +| Name | Description | Required | Default | Type | Platform | HarmonyOS Support | +| ------------------------------------------ | ------------------------ | -------- | ------------- | --------------- | -------- | ----------------- | +| showLengthdeprecated from 4.0.2 | Display number | no | data.length-1 | number | All | yes | +| moveSize | Item translate size | no | screen.width | number | All | yes | +| stackInterval | The spacing of each item | no | 18 | number | All | yes | +| scaleInterval | The scale of each item | no | 0.04 | number | All | yes | +| opacityInterval | The opacity of each item | no | 0.1 | number | All | yes | +| rotateZDeg | The item rotation Angle | no | 30 | number | All | yes | +| snapDirection | Slide direction | no | 'left' | 'left'\|'right' | All | yes | ### Ref diff --git a/zh-cn/react-native-reanimated-table.md b/zh-cn/react-native-reanimated-table.md index fdad8be8..df3e83db 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 | 0.77 | + 进入到工程目录并输入以下命令： @@ -25,13 +30,21 @@ #### npm ```bash +# V0.0.2 npm install react-native-reanimated-table@0.0.2 + +# V0.2.0 +npm install react-native-reanimated-table@0.2.0 ``` #### yarn ```bash +# V0.0.2 yarn add react-native-reanimated-table@0.0.2 + +# V0.2.0 +yarn add react-native-reanimated-table@0.2.0 ``` diff --git a/zh-cn/react-native-shadow-2.md b/zh-cn/react-native-shadow-2.md index f8789e64..d45b6e8a 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 ``` diff --git a/zh-cn/react-native-testing-library.md b/zh-cn/react-native-testing-library.md index 6bbaa1ba..cb5484b4 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,14 +32,24 @@ ```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 ``` diff --git a/zh-cn/react-native-vector-icons.md b/zh-cn/react-native-vector-icons.md index 52133622..b873b28a 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 2e21db17..6348c47a 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 be29237e..939780f7 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 7b8b87fb..89bfe216 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,16 @@ 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 | +## 接口 + +| **Name** | **Description** | **Type** | **Required** | **Platform** | HarmonyOS Support | +| ------------------------------------------------------------ | ------------------------------------------------------------ | ------------ | ------------ | ------------ | ----------------- | +| `public removeLayout(index: number): void`4.2.3+ | 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 | +| `public getNativeScrollRef(): ScrollView | null`4.2.3+ | Override and return ref to your custom scrollview. Useful if you need to use Animated Events on the new architecture. | function | No | All | Yes | +| `public getHasRenderedOnce(): boolean`4.2.3+ | 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