From 7c951df775830ed0ce9cb4b1682b20caf1abdd93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BD=97=E5=9D=A4?= Date: Tue, 19 Nov 2024 17:01:17 +0800 Subject: [PATCH 1/4] feat: Carousel add lazy&renderLazyPlaceholder props --- components/carousel/PropsType.tsx | 2 ++ components/carousel/index.tsx | 27 +++++++++++++++++++++++++-- 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/components/carousel/PropsType.tsx b/components/carousel/PropsType.tsx index aea2cf4e..f61e763e 100644 --- a/components/carousel/PropsType.tsx +++ b/components/carousel/PropsType.tsx @@ -12,6 +12,8 @@ export interface CarouselProps extends ScrollViewProps { dotActiveStyle?: StyleProp dotStyle?: StyleProp infinite?: boolean + lazy?: boolean | ((index: number) => boolean) + renderLazyPlaceholder?: ReactNode pageStyle?: StyleProp pagination?: (props: PaginationProps) => ReactNode selectedIndex?: number diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx index 80aae940..506646fb 100644 --- a/components/carousel/index.tsx +++ b/components/carousel/index.tsx @@ -379,6 +379,28 @@ class Carousel extends React.PureComponent { }) } + lazyLoad(child: React.ReactNode, index: number) { + const { infinite, lazy, renderLazyPlaceholder } = this.props + const { selectedIndex } = this.state + console.log(selectedIndex, index + (infinite ? 1 : 0), '9') + if (!lazy) { + return child + } + if ( + lazy && + typeof lazy === 'boolean' && + selectedIndex === index - (infinite ? 1 : 0) + ) { + return child + } + + if (lazy && typeof lazy === 'function' && lazy(index)) { + return child + } + + return renderLazyPlaceholder + } + render() { const { children, dots, infinite, accessibilityLabel, pageStyle } = this.props @@ -399,14 +421,14 @@ class Carousel extends React.PureComponent { key={`carousel_${index}`} accessibilityLabel={`${accessibilityLabel}_${index}`} style={pageWidth}> - {child} + {this.lazyLoad(child, index)} )) } else { pages = {children} } return ( - + {this.renderScroll(pages)} {dots && this.renderDots(selectedIndex)} @@ -435,6 +457,7 @@ class Carousel extends React.PureComponent { showsVerticalScrollIndicator={false} scrollEventThrottle={Platform.OS === 'web' ? 0 : 16} {...this.props} + style={undefined} ref={this.scrollview as any} horizontal={!this.props.vertical} pagingEnabled={true} From e426586e3590d455b504bfffc2c28acce1244e34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BD=97=E5=9D=A4?= Date: Tue, 19 Nov 2024 18:32:19 +0800 Subject: [PATCH 2/4] fix: lodash.mergewith dependencie(#1397) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ccb05113..6b17ee52 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "classnames": "^2.2.1", "dayjs": "^1.11.7", "lodash.assignwith": "^4.2.0", + "lodash.mergewith": "^4.6.2", "normalize-css-color": "^1.0.2", "rc-field-form": "^2.0.0", "rc-util": "^5.39.1", @@ -75,7 +76,6 @@ "jest": "^26.6.3", "jsonml.js": "^0.1.0", "lint-staged": "^8.0.4", - "lodash.mergewith": "^4.6.2", "metro-react-native-babel-preset": "^0.66.0", "mockdate": "^2.0.1", "pre-commit": "1.x", From 4e7175abbfc1be7b446c260687d36a0be8498fd4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BD=97=E5=9D=A4?= Date: Wed, 20 Nov 2024 11:36:19 +0800 Subject: [PATCH 3/4] chore: test --- components/carousel/PropsType.tsx | 2 +- .../__tests__/__snapshots__/demo.test.js.snap | 28 +++++++++---------- components/carousel/index.en-US.md | 22 +++++++++++++-- components/carousel/index.tsx | 9 ++++-- components/carousel/index.zh-CN.md | 20 ++++++++++++- .../__tests__/__snapshots__/demo.test.js.snap | 12 ++++---- components/picker-view/picker-view.tsx | 2 +- components/slider/slider.tsx | 4 +-- components/stepper/stepper.tsx | 2 +- components/switch/Switch.tsx | 2 +- 10 files changed, 71 insertions(+), 32 deletions(-) diff --git a/components/carousel/PropsType.tsx b/components/carousel/PropsType.tsx index f61e763e..9e7a2cee 100644 --- a/components/carousel/PropsType.tsx +++ b/components/carousel/PropsType.tsx @@ -13,7 +13,7 @@ export interface CarouselProps extends ScrollViewProps { dotStyle?: StyleProp infinite?: boolean lazy?: boolean | ((index: number) => boolean) - renderLazyPlaceholder?: ReactNode + renderLazyPlaceholder?: (index: number) => ReactNode pageStyle?: StyleProp pagination?: (props: PaginationProps) => ReactNode selectedIndex?: number diff --git a/components/carousel/__tests__/__snapshots__/demo.test.js.snap b/components/carousel/__tests__/__snapshots__/demo.test.js.snap index 115537b9..e92d78d5 100644 --- a/components/carousel/__tests__/__snapshots__/demo.test.js.snap +++ b/components/carousel/__tests__/__snapshots__/demo.test.js.snap @@ -21,6 +21,13 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = ` @@ -483,6 +483,13 @@ exports[`renders ./components/carousel/demo/basic.tsx correctly 1`] = ` diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md index b01b189d..c3d748de 100644 --- a/components/carousel/index.en-US.md +++ b/components/carousel/index.en-US.md @@ -15,6 +15,8 @@ Properties | Descrition | Type | Default | Version | dotStyle | style of dots | ViewStyle | | | | dotActiveStyle | style of active dot | ViewStyle | | | | infinite | whether is infinite loop | Boolean | false | | +| lazy | Function which takes an object with the current page and returns a boolean to indicate whether to lazily render the scenes. | Boolean \| `(index:number) => boolean` | false | `5.3.1` | +| renderLazyPlaceholder | A callback that returns a custom React Element to render for pages not yet rendered. Requires the `lazy` prop to be enabled. | `(index:number) => ReactNode` | - | `5.3.1` | | pageStyle | style of the carousel page | ViewStyle | | | | pagination | A generator function which could be used to customized pagination. | (props) => ReactNode | | | | selectedIndex | current selected index | number | 0 | | @@ -35,7 +37,7 @@ Properties | Descrition | Type ## FAQ -### On the Android platform, when using `Carousel` nested in `ScrollView`, the Carousel Item cannot slide. What should I do? +### 1. On the Android platform, when using `Carousel` nested in `ScrollView`, the Carousel Item cannot slide. What should I do? Support in `5.1.3`. Set the `nestedScrollEnabled` property of `ScrollView` to `true`. @@ -46,7 +48,23 @@ Support in `5.1.3`. Set the `nestedScrollEnabled` property of `ScrollView` to `t ``` -### Why choose Carousel instead of `react-native-pager-view` ? +### 2. Use `lazy` and `renderLazyPlaceholder` props to render routes as needed + +Support in `5.3.1`. +```jsx +// `lazy={true}` only the current page is rendered + } +/> + +// eg: Render the sibling pages, a total of 3 pages + Math.abs(selectedIndex - i) < 2} +> +``` + +### 3. Why choose Carousel instead of `react-native-pager-view` ? First, Carousel supports the `infinite` property, which means 🌟a true infinite loop🌟.
Second, Carousel is completely based on `ScrollView`, which is not only lighter but also more compatible. \ No newline at end of file diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx index 506646fb..7ad40ee4 100644 --- a/components/carousel/index.tsx +++ b/components/carousel/index.tsx @@ -382,7 +382,6 @@ class Carousel extends React.PureComponent { lazyLoad(child: React.ReactNode, index: number) { const { infinite, lazy, renderLazyPlaceholder } = this.props const { selectedIndex } = this.state - console.log(selectedIndex, index + (infinite ? 1 : 0), '9') if (!lazy) { return child } @@ -394,11 +393,15 @@ class Carousel extends React.PureComponent { return child } - if (lazy && typeof lazy === 'function' && lazy(index)) { + if ( + lazy && + typeof lazy === 'function' && + lazy(index - (infinite ? 1 : 0)) + ) { return child } - return renderLazyPlaceholder + return renderLazyPlaceholder?.(index) } render() { diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md index 6919b134..e8e1d7ef 100644 --- a/components/carousel/index.zh-CN.md +++ b/components/carousel/index.zh-CN.md @@ -18,6 +18,8 @@ subtitle: 走马灯 | dotStyle | 指示点样式 | ViewStyle | 无 | | | dotActiveStyle | 当前激活的指示点样式 | ViewStyle | 无 | | | infinite | 是否循环播放 | Boolean | false | | +| lazy | 是否懒加载。支持布尔值或函数返回 | Boolean \| `(index:number) => boolean` | false | `5.3.1` | +| renderLazyPlaceholder | 返回自定义 React 元素以呈现尚未呈现的页面的回调。以`索引`作为参数的对象。需要启用 `lazy` 属性。 | `(index:number) => ReactNode` | - | `5.3.1` | | pageStyle | 轮播页内样式 | ViewStyle | 无 | | | pagination | 自定义 pagination | (props) => ReactNode | | | | selectedIndex | 手动设置当前显示的索引 | number | 0 | | @@ -49,7 +51,23 @@ Carousel 的其他属性和 react-native 内置组件[ScrollView](https://reactn ``` -### 2. Carousel和 `react-native-pager-view` 有什么区别（或优势）？ +### 2. 使用 lazy 和 renderLazyPlaceholder 属性懒加载提高性能 + +`5.3.1`新增支持。 +```jsx +// lazy={true} 表示只渲染当前page + } +/> + +// 渲染相邻的page，总共3个page + Math.abs(selectedIndex - i) < 2} +> +``` + +### 3. Carousel和 `react-native-pager-view` 有什么区别（或优势）？ 首先，Carousel支持`infinite`属性，即🌟真正的无限循环🌟。
其次，Carousel是完全基于`ScrollView`实现，不仅更轻量，且更具有兼容性。 \ No newline at end of file diff --git a/components/grid/__tests__/__snapshots__/demo.test.js.snap b/components/grid/__tests__/__snapshots__/demo.test.js.snap index b657dcec..08364b13 100644 --- a/components/grid/__tests__/__snapshots__/demo.test.js.snap +++ b/components/grid/__tests__/__snapshots__/demo.test.js.snap @@ -913,6 +913,12 @@ exports[`renders ./components/grid/demo/basic.tsx correctly 1`] = ` diff --git a/components/picker-view/picker-view.tsx b/components/picker-view/picker-view.tsx index 056f0d29..256b2a0b 100644 --- a/components/picker-view/picker-view.tsx +++ b/components/picker-view/picker-view.tsx @@ -86,7 +86,7 @@ const RMCPickerView: React.FC = (props) => { const handleSelect = useCallback( (...args) => { p.handleSelect.apply(undefined, args) - onHaptics('picker') + onHaptics?.('picker') }, [onHaptics, p.handleSelect], ) diff --git a/components/slider/slider.tsx b/components/slider/slider.tsx index f81daea7..d0fd3759 100644 --- a/components/slider/slider.tsx +++ b/components/slider/slider.tsx @@ -203,7 +203,7 @@ export function Slider( const safeValue = getSafeValue(value) if (isSliding) { onChange?.(safeValue) - ticks && !disabledStep && onHaptics('slider') + ticks && !disabledStep && onHaptics?.('slider') } if (!isSliding || range) { offset1.value = getPositionByValue(safeValue, 0) @@ -250,7 +250,7 @@ export function Slider( sliderValue.value = targetValue as SliderValue } if (!ticks) { - onHaptics('slider') + onHaptics?.('slider') } }, [getValueByPosition, onHaptics, range, sliderValue, ticks], diff --git a/components/stepper/stepper.tsx b/components/stepper/stepper.tsx index 5760b009..efb7b63f 100644 --- a/components/stepper/stepper.tsx +++ b/components/stepper/stepper.tsx @@ -167,7 +167,7 @@ function InnerStepper( return state } - onHaptics('stepper') + onHaptics?.('stepper') let stepValue = getMiniDecimal(step) if (action.type === 'minus') { diff --git a/components/switch/Switch.tsx b/components/switch/Switch.tsx index 02163965..e7dc9e38 100644 --- a/components/switch/Switch.tsx +++ b/components/switch/Switch.tsx @@ -144,7 +144,7 @@ const AntmSwitch = (props: SwitchProps) => { throw e } } - onHaptics('switch') + onHaptics?.('switch') return newChecked } From a8de51911e5c788e879d9b268ed43135e7d67cf4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BD=97=E5=9D=A4?= Date: Wed, 20 Nov 2024 11:37:03 +0800 Subject: [PATCH 4/4] bump 5.3.1 --- CHANGELOG.en-US.md | 10 ++++++++++ CHANGELOG.zh-CN.md | 9 +++++++++ package.json | 2 +- 3 files changed, 20 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 77eb7cf4..7846219c 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -13,6 +13,16 @@ toc: false - Major version release is not included in this schedule for breadking change and new features. --- + +### 5.3.1 +`2024-11-20` + - **Carousel** + - feat: add `lazy` & `renderLazyPlaceholder` prop + - fix: react-native@0.75+ avoid height collapse [#1372](https://github.com/ant-design/ant-design-mobile-rn/issues/1372) + - **Provider** + - fix: `onHaptics` not works bug + - fix: `lodash.mergewith` dependencie [#1397](https://github.com/ant-design/ant-design-mobile-rn/issues/1397) + ### 5.3.0 `2024-11-14` - 🌟 **Typescript**: export all component props types. diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index a88dbaa2..6730520c 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -14,6 +14,15 @@ toc: false --- +### 5.3.1 +`2024-11-20` + - **Carousel** + - feat: 新增 `lazy` & `renderLazyPlaceholder` 属性 + - fix: react-native@0.75+ 高度坍塌 [#1372](https://github.com/ant-design/ant-design-mobile-rn/issues/1372) + - **Provider** + - fix: `onHaptics` 不工作bug + - fix: `lodash.mergewith` dependencie [#1397](https://github.com/ant-design/ant-design-mobile-rn/issues/1397) + ### 5.3.0 `2024-11-14` - 🌟 **Typescript**: 导出所有 component 的 props types。 diff --git a/package.json b/package.json index 6b17ee52..652e8e3a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@ant-design/react-native", - "version": "5.3.0", + "version": "5.3.1", "description": "基于蚂蚁金服移动设计规范的 React Native 组件库", "keywords": [ "ant",