diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 2c43b4255..77eb7cf48 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -13,6 +13,27 @@ toc: false - Major version release is not included in this schedule for breadking change and new features. --- +### 5.3.0 +`2024-11-14` + - 🌟 **Typescript**: export all component props types. + (To support for [nativewind](https://github.com/nativewind/nativewind)) + - **Toast**: + - feat: add `useToast` hook method [#1388](https://github.com/ant-design/ant-design-mobile-rn/issues/1388) + - **Modal** + - feat: add `useModal` hook method [#1383](https://github.com/ant-design/ant-design-mobile-rn/issues/1383) + - feat: add `modalType` prop (Sync to **Picker**) +- **Carousel** + - feat: add `onScrollAnimationEnd` prop +- **Slider** + - feat: add `disabledStep`、`onSlidingStart`、`onSlidingComplete`、`tapToSeek` prop +- 🔥 Upgrade react-native@0.75+ + - fix: [Switch] `style` props works [#1389](https://github.com/ant-design/ant-design-mobile-rn/issues/1398) + - fix: [Pagination] Remove `flex: 1` to avoid height collapse +- other fix + - fix: [Form] fix Require cycle + - fix: [Tooltip] safe floatingStyles + - fix: [Picker] `defaultValue` prop works [#1311](https://github.com/ant-design/ant-design-mobile-rn/issues/1311) + - fix: [Radio] `defaultChecked` prop works [#1380](https://github.com/ant-design/ant-design-mobile-rn/issues/1380) ### 5.2.3 `2024-09-09` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index e279a993d..a88dbaa28 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -14,6 +14,28 @@ toc: false --- +### 5.3.0 +`2024-11-14` + - 🌟 **Typescript**: 导出所有 component 的 props types。 + (以支持 [nativewind](https://github.com/nativewind/nativewind)) + - 🔥 **Toast**: + - feat: 新增 `useToast` hook 方法 [#1388](https://github.com/ant-design/ant-design-mobile-rn/issues/1388) + - 🔥 **Modal** + - feat: 新增 `useModal` hook 方法 [#1383](https://github.com/ant-design/ant-design-mobile-rn/issues/1383) + - feat: 新增 `modalType` 属性 (**Picker** 也同步支持) +- **Carousel** + - feat: 新增 `onScrollAnimationEnd` 属性 +- **Slider** + - feat: 新增 `disabledStep`、`onSlidingStart`、`onSlidingComplete`、`tapToSeek` 属性 +- 🔥 适配 react-native@0.75+ + - fix: [Switch] `style` props works [#1389](https://github.com/ant-design/ant-design-mobile-rn/issues/1398) + - fix: [Pagination] 移除`flex: 1`，避免高度坍塌 +- 其他fix + - fix: [Form] fix Require cycle + - fix: [Tooltip] safe floatingStyles + - fix: [Picker] `defaultValue` prop works [#1311](https://github.com/ant-design/ant-design-mobile-rn/issues/1311) + - fix: [Radio] `defaultChecked` prop works [#1380](https://github.com/ant-design/ant-design-mobile-rn/issues/1380) + ### 5.2.3 `2024-09-09` - 🔥 **Carousel** diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md index 949a9e41f..b01b189d8 100644 --- a/components/carousel/index.en-US.md +++ b/components/carousel/index.en-US.md @@ -6,20 +6,21 @@ title: Carousel ## API -Properties | Descrition | Type | Default ------------|------------|------|-------- -| afterChange | callback to be called after a slide is changed | (current: number) => void | | -| autoplay | autoplay mode active | Boolean | false | -| autoplayInterval | interval for autoplay iteration | Number | 3000 | -| dots | whether to display the indication dots | Boolean | true | -| dotStyle | style of dots | ViewStyle | | -| dotActiveStyle | style of active dot | ViewStyle | | -| infinite | whether is infinite loop | Boolean | false | -| 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 | -| style | ScrollView style
(`tips: Recommended setting, the overall carousel size is determined by the container scrollview and not the inner page`) | ViewStyle | | -| vertical | controls the pagination display direction. | Boolean | false | +Properties | Descrition | Type | Default | Version +-----------|------------|------|---------|---------- +| afterChange | callback to be called after a slide is changed | (current: number) => void | | | +| autoplay | autoplay mode active | Boolean | false | | +| autoplayInterval | interval for autoplay iteration | Number | 3000 | | +| dots | whether to display the indication dots | Boolean | true | | +| dotStyle | style of dots | ViewStyle | | | +| dotActiveStyle | style of active dot | ViewStyle | | | +| infinite | whether is infinite loop | Boolean | false | | +| 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 | | +| style | ScrollView style
(`tips: Recommended setting, the overall carousel size is determined by the container scrollview and not the inner page`) | ViewStyle | | | +| vertical | controls the pagination display direction. | Boolean | false | | +| onScrollAnimationEnd | Called when a scrolling animation ends. | ()=>void | | `5.3.0` | The rest of the props of Carousel are exactly the same as the react-native [ScrollView](https://reactnative.dev/docs/scrollview.html); diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx index b52f0ca60..80aae9401 100644 --- a/components/carousel/index.tsx +++ b/components/carousel/index.tsx @@ -217,6 +217,9 @@ class Carousel extends React.PureComponent { if (isScrollAnimationEnd) { this.updateIndex(currentOffset) this.autoplay() + if (this.props.onScrollAnimationEnd) { + this.props.onScrollAnimationEnd() + } } } @@ -249,7 +252,7 @@ class Carousel extends React.PureComponent { }, () => { // web & android - this.scrollview?.current?.scrollTo({ ...offset, animated: true }) + this.scrollview?.current?.scrollTo({ ...offset, animated: false }) this.autoplay() }, ) @@ -440,7 +443,8 @@ class Carousel extends React.PureComponent { onScrollEndDrag={this.onScrollEndDrag} onScroll={this.onScroll} onTouchStart={this.onTouchStartForWeb} - onTouchEnd={this.onTouchEndForWeb}> + onTouchEnd={this.onTouchEndForWeb} + onScrollAnimationEnd={undefined}> {pages} ) diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md index 0f1f6a177..6919b1341 100644 --- a/components/carousel/index.zh-CN.md +++ b/components/carousel/index.zh-CN.md @@ -9,20 +9,21 @@ subtitle: 走马灯 ## API -属性 | 说明 | 类型 | 默认值 -----|-----|------|------ -| afterChange | 切换面板后的回调函数 | (current: number) => void | 无 | -| autoplay | 是否自动切换 | Boolean | false | -| autoplayInterval | 自动切换的时间间隔 | Number | 3000 | -| dots | 是否显示面板指示点 | Boolean | true | -| dotStyle | 指示点样式 | ViewStyle | 无 | -| dotActiveStyle | 当前激活的指示点样式 | ViewStyle | 无 | -| infinite | 是否循环播放 | Boolean | false | -| pageStyle | 轮播页内样式 | ViewStyle | 无 | -| pagination | 自定义 pagination | (props) => ReactNode | | -| selectedIndex | 手动设置当前显示的索引 | number | 0 | -| style | 轮播容器样式
(建议设置，整体轮播大小由容器决定非页内决定) | ViewStyle | 无 | -| vertical | 垂直显示 | Boolean | false | +属性 | 说明 | 类型 | 默认值 | 版本 +----|-----|------|-------|----- +| afterChange | 切换面板后的回调函数 | (current: number) => void | 无 | | +| autoplay | 是否自动切换 | Boolean | false | | +| autoplayInterval | 自动切换的时间间隔 | Number | 3000 | | +| dots | 是否显示面板指示点 | Boolean | true | | +| dotStyle | 指示点样式 | ViewStyle | 无 | | +| dotActiveStyle | 当前激活的指示点样式 | ViewStyle | 无 | | +| infinite | 是否循环播放 | Boolean | false | | +| pageStyle | 轮播页内样式 | ViewStyle | 无 | | +| pagination | 自定义 pagination | (props) => ReactNode | | | +| selectedIndex | 手动设置当前显示的索引 | number | 0 | | +| style | 轮播容器样式
(建议设置，整体轮播大小由容器决定非页内决定) | ViewStyle | 无 | | +| vertical | 垂直显示 | Boolean | false | | +| onScrollAnimationEnd | 当滚动动画结束时调用 | ()=>void | 无 | `5.3.0` | Carousel 的其他属性和 react-native 内置组件[ScrollView](https://reactnative.dev/docs/scrollview.html) 一致;
diff --git a/components/collapse/__tests__/__snapshots__/demo.test.js.snap b/components/collapse/__tests__/__snapshots__/demo.test.js.snap deleted file mode 100644 index e5a34855d..000000000 --- a/components/collapse/__tests__/__snapshots__/demo.test.js.snap +++ /dev/null @@ -1,1348 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders ./components/collapse/demo/basic.tsx correctly 1`] = ` - - - - - 手风琴模式 - - - - - - - - - 第一项 - - - -  - - - - - - - - - - - - - 第二项 - - - -  - - - - - - - - - - - - - 第三项 - - - -  - - - - - - - - - - - - - - - - - 自定义折叠图标 - - - - - - - - - 第一项 - - - -  - - - - - - - - - - - - 你可以通过 Collapse 的 arrow 属性来控制全部面板的箭头 - - - - - - - - - - - 第二项 - - - -  - - - - - - - - - - - - - 第三项 - - - -  - - - - - - - - - - - - - - - - - 动态内容 - - - - - - - - - 第一项 - - - -  - - - - - - - - - - - - - 第二项 - - - -  - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`; diff --git a/components/collapse/__tests__/demo.test.js b/components/collapse/__tests__/demo.test.js deleted file mode 100644 index d9ec35ed2..000000000 --- a/components/collapse/__tests__/demo.test.js +++ /dev/null @@ -1,3 +0,0 @@ -import rnDemoTest from '../../../tests/shared/demoTest' - -rnDemoTest('collapse') diff --git a/components/date-picker-view/demo/basic.tsx b/components/date-picker-view/demo/basic.tsx index 65330c682..ce1b7bc99 100644 --- a/components/date-picker-view/demo/basic.tsx +++ b/components/date-picker-view/demo/basic.tsx @@ -11,7 +11,7 @@ export default () => { return ( 基础用法 - + 受控模式 { - let value = new Date(val || '') + if (!val) { + return [] + } + let value = new Date(val) if (isNaN(value.getTime()) || value.getTime() < minDate.getTime()) { value = minDate } else if (value.getTime() > maxDate.getTime()) { diff --git a/components/date-picker/date-picker.tsx b/components/date-picker/date-picker.tsx index dc0844bdf..fdaaf474c 100644 --- a/components/date-picker/date-picker.tsx +++ b/components/date-picker/date-picker.tsx @@ -1,4 +1,5 @@ import dayjs from 'dayjs' +import useMergedState from 'rc-util/lib/hooks/useMergedState' import React, { forwardRef, useCallback, @@ -25,7 +26,6 @@ export type DatePickerRef = any export interface DatePickerProps extends DatePickerPropsType {} const defaultProps = { - defaultDate: new Date(), minDate: new Date('2000-1-1'), maxDate: new Date('2030-1-1'), precision: 'day', @@ -48,10 +48,28 @@ const DatePicker = forwardRef((props, ref) => { const _precision = precision || (mode === 'date' ? 'day' : mode) || 'day' - const [innerValue, setInnerValue] = useState( - value === undefined ? defaultValue || defaultDate : value, + // ============ Effect =========== + const [valueProp, setValueProp] = useMergedState( + undefined, + { + value, + defaultValue: defaultValue || defaultDate, + }, + ) + const [innerValue, setInnerValue] = useState(valueProp) + useEffect(() => { + setInnerValue(valueProp) + }, [valueProp]) + + // innerValue => pickerInnerValue + const pickerInnerValue = usePickerValue( + innerValue, + minDate, + maxDate, + _precision, ) + // ============ Locale =========== const _locale = getComponentLocale( p, useContext(LocaleContext), @@ -64,19 +82,11 @@ const DatePicker = forwardRef((props, ref) => { _locale.DatePickerLocale, ) + // ============ Ref =========== const pickerRef = React.useRef(null) useImperativeHandle(ref, () => pickerRef.current as PickerRef) - // innerValue - const pickerInnerValue = usePickerValue( - innerValue, - minDate, - maxDate, - _precision, - ) - // value prop - const pickerValue = usePickerValue(value, minDate, maxDate, _precision) - + // ============ Columns =========== const columns = useMemo(() => { return generateDatePickerColumns( pickerInnerValue, @@ -110,8 +120,9 @@ const DatePicker = forwardRef((props, ref) => { const handleOk = useCallback( (val, ext) => { p.onOk?.(convertStringArrayToDate(val, _precision), ext) + setValueProp(val) }, - [_precision, p], + [_precision, p, setValueProp], ) const handleChange = useCallback( @@ -143,24 +154,20 @@ const DatePicker = forwardRef((props, ref) => { const onVisibleChange = useCallback( (visible) => { p.onVisibleChange?.(visible) - if (!visible && value !== innerValue) { - // 关闭时，如果选中值不同步，恢复为原选中值 - setInnerValue(value) + if (visible && !valueProp) { + setInnerValue(new Date()) + } else { + setInnerValue(valueProp) } }, - [innerValue, p, value], + [p, valueProp], ) - useEffect(() => { - setInnerValue(value) - }, [value]) - return ( { void onLongPress?: () => void onPressIn?: () => void diff --git a/components/form/FormItem/ItemHolder.tsx b/components/form/FormItem/ItemHolder.tsx index d1ecd3b36..763a9a41a 100644 --- a/components/form/FormItem/ItemHolder.tsx +++ b/components/form/FormItem/ItemHolder.tsx @@ -2,8 +2,9 @@ import type { Meta } from 'rc-field-form/lib/interface' import React, { useMemo } from 'react' import { StyleSheet } from 'react-native' import { FormItemProps } from '.' -import { List, View } from '../..' +import List from '../../list/index' import { useTheme } from '../../style' +import View from '../../view/index' import ErrorList from '../ErrorList' import FormItemLabel from '../FormItemLabel' import type { ReportMetaChange } from '../context' diff --git a/components/form/demo/basic.tsx b/components/form/demo/basic.tsx index b851caa97..fc0051597 100644 --- a/components/form/demo/basic.tsx +++ b/components/form/demo/basic.tsx @@ -58,6 +58,7 @@ const FormExample: React.FC = () => { onPress={() => { pickerRef.current.toggle() }}> + {/* TODO-luokun: 待回归 */} {({ extra, value, toggle }) => ( } -const InternalList: React.ForwardRefRenderFunction = ( - props, - ref, -) => { +const InternalList: React.ForwardRefRenderFunction< + View, + ListProps & ViewProps +> = (props, ref) => { const { children, style, renderHeader, renderFooter, styles, ...restProps } = props @@ -55,8 +55,9 @@ const InternalList: React.ForwardRefRenderFunction = ( ) } -const List = React.forwardRef(InternalList) as (( - props: React.PropsWithChildren & React.RefAttributes, +const List = React.forwardRef(InternalList) as (( + props: React.PropsWithChildren & + React.RefAttributes, ) => React.ReactElement) & Pick diff --git a/components/modal/AlertContainer.tsx b/components/modal/AlertContainer.tsx index f3e110c4f..2068b33f5 100644 --- a/components/modal/AlertContainer.tsx +++ b/components/modal/AlertContainer.tsx @@ -1,9 +1,9 @@ import React, { isValidElement } from 'react' import { ScrollView, Text, TextStyle } from 'react-native' import Modal from './Modal' -import { Action, CallbackOnBackHandler } from './PropsType' +import { Action, CallbackOnBackHandler, ModalPropsType } from './PropsType' -export interface AlertContainerProps { +export interface AlertContainerProps extends Pick { title: React.ReactNode content: React.ReactNode actions: Action[] @@ -68,6 +68,7 @@ export default class AlertContainer extends React.Component< title={title} visible={this.state.visible} footer={footer} + modalType={this.props.modalType} onAnimationEnd={onAnimationEnd} onRequestClose={this.onBackAndroid} bodyStyle={{ diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 6739ca30c..db522177f 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -2,33 +2,24 @@ import React from 'react' import { KeyboardAvoidingView, Platform, - StyleProp, Text, - TextStyle, TouchableHighlight, TouchableWithoutFeedback, View, - ViewStyle, } from 'react-native' import { getComponentLocale } from '../_util/getLocale' import { LocaleContext } from '../locale-provider' -import { WithTheme, WithThemeStyles } from '../style' +import { WithTheme } from '../style' import RCModal from './ModalView' -import { CallbackOnBackHandler, ModalPropsType } from './PropsType' +import { ModalPropsType } from './PropsType' import alert from './alert' import zh_CN from './locale/zh_CN' import operation from './operation' import prompt from './prompt' -import modalStyles, { ModalStyle } from './style/index' +import modalStyles from './style/index' +import useModal from './useModal' -export interface ModalProps - extends ModalPropsType, - WithThemeStyles { - style?: StyleProp - bodyStyle?: StyleProp - onRequestClose?: CallbackOnBackHandler - children?: React.ReactNode -} +export interface ModalProps extends ModalPropsType {} class AntmModal extends React.Component { static defaultProps = { @@ -48,6 +39,7 @@ class AntmModal extends React.Component { static alert: typeof alert static operation: typeof operation static prompt: typeof prompt + static useModal: typeof useModal static contextType = LocaleContext @@ -59,6 +51,7 @@ class AntmModal extends React.Component { children, style, animateAppear, + animationDuration, maskClosable, popup, transparent, @@ -67,6 +60,7 @@ class AntmModal extends React.Component { bodyStyle, onAnimationEnd, onRequestClose, + modalType, } = this.props // tslint:disable-next-line:variable-name @@ -158,31 +152,31 @@ class AntmModal extends React.Component { ) : null return ( - - - - - {title ? ( - {title} - ) : null} - {children} - {footerDom} - {closableDom} - - - - + + + + {title ? ( + {title} + ) : null} + {children} + {footerDom} + {closableDom} + + + ) } if (popup) { @@ -194,39 +188,39 @@ class AntmModal extends React.Component { animType = 'slide-down' } return ( - - - {children} - - + + {children} + ) } if (animType === 'slide') { animType = undefined } return ( - - - {children} - - + + {children} + ) }} diff --git a/components/modal/ModalView.tsx b/components/modal/ModalView.tsx index 00cbdf360..9a9219ddc 100644 --- a/components/modal/ModalView.tsx +++ b/components/modal/ModalView.tsx @@ -4,6 +4,7 @@ import { BackHandler, Dimensions, Easing, + Modal as NativeModal, StyleProp, StyleSheet, TouchableWithoutFeedback, @@ -11,7 +12,7 @@ import { ViewStyle, } from 'react-native' import Portal from '../portal' -import { CallbackOnBackHandler } from './PropsType' +import { ModalPropsType } from './PropsType' const styles = StyleSheet.create({ wrap: { @@ -36,19 +37,23 @@ const styles = StyleSheet.create({ const screen = Dimensions.get('window') -export interface IModalPropTypes { - wrapStyle?: StyleProp +export interface IModalPropTypes + extends Pick< + ModalPropsType, + | 'animateAppear' + | 'children' + | 'maskClosable' + | 'modalType' + | 'onAnimationEnd' + | 'onClose' + | 'onRequestClose' + | 'visible' + > { + animationDuration?: number + animationType: 'none' | 'fade' | 'slide-up' | 'slide-down' maskStyle?: StyleProp style?: {} - children?: React.ReactNode - animationType: 'none' | 'fade' | 'slide-up' | 'slide-down' - animationDuration?: number - visible: boolean - maskClosable?: boolean - animateAppear?: boolean - onClose?: () => void // onDismiss - onAnimationEnd?: (visible: boolean) => void // onShow - onRequestClose?: CallbackOnBackHandler + wrapStyle?: StyleProp } export default class RCModal extends React.Component { @@ -62,6 +67,7 @@ export default class RCModal extends React.Component { maskClosable: true, onClose() {}, onAnimationEnd(_visible: boolean) {}, + modalType: 'portal', } as IModalPropTypes animMask: any @@ -234,8 +240,26 @@ export default class RCModal extends React.Component { }, } + let Modal = Portal as React.ElementType + switch (props.modalType) { + case 'modal': + Modal = (p) => + React.createElement(NativeModal, { + visible: true, + transparent: true, + ...p, + }) + break + case 'view': + Modal = (p) => + React.createElement(View, { + style: StyleSheet.absoluteFill, + ...p, + }) + } + return ( - + { {this.props.children} - + ) } } diff --git a/components/modal/OperationContainer.tsx b/components/modal/OperationContainer.tsx index 00badbc63..048f11b0a 100644 --- a/components/modal/OperationContainer.tsx +++ b/components/modal/OperationContainer.tsx @@ -2,10 +2,11 @@ import React from 'react' import { TextStyle } from 'react-native' import { WithTheme } from '../style' import Modal from './Modal' -import { Action, CallbackOnBackHandler } from './PropsType' +import { Action, CallbackOnBackHandler, ModalPropsType } from './PropsType' import modalStyle from './style/index' -export interface OperationContainerProps { +export interface OperationContainerProps + extends Pick { actions: Action[] onAnimationEnd?: (visible: boolean) => void onBackHandler?: CallbackOnBackHandler @@ -69,6 +70,7 @@ export default class OperationContainer extends React.Component< transparent maskClosable visible={this.state.visible} + modalType={this.props.modalType} onClose={this.onClose} onAnimationEnd={onAnimationEnd} onRequestClose={this.onBackAndroid} diff --git a/components/modal/PromptContainer.tsx b/components/modal/PromptContainer.tsx index e91f57647..918d9e41d 100644 --- a/components/modal/PromptContainer.tsx +++ b/components/modal/PromptContainer.tsx @@ -4,11 +4,17 @@ import { getComponentLocale } from '../_util/getLocale' import { LocaleContext } from '../locale-provider' import { WithTheme, WithThemeStyles } from '../style' import Modal from './Modal' -import { CallbackOnBackHandler, CallbackOrActions } from './PropsType' +import { + CallbackOnBackHandler, + CallbackOrActions, + ModalPropsType, +} from './PropsType' import zh_CN from './locale/zh_CN' import promptStyles, { PromptStyle } from './style/prompt' -export interface PropmptContainerProps extends WithThemeStyles { +export interface PropmptContainerProps + extends WithThemeStyles, + Pick { title: React.ReactNode message?: React.ReactNode type?: 'default' | 'login-password' | 'secure-text' @@ -147,6 +153,7 @@ export default class PropmptContainer extends React.Component< title={title} visible={this.state.visible} footer={footer} + modalType={this.props.modalType} onAnimationEnd={onAnimationEnd} onRequestClose={this.onBackAndroid}> {message ? {message} : null} diff --git a/components/modal/PropsType.tsx b/components/modal/PropsType.tsx index 99104b6ff..42ed89a4b 100644 --- a/components/modal/PropsType.tsx +++ b/components/modal/PropsType.tsx @@ -1,20 +1,29 @@ import React from 'react' -import { TextStyle } from 'react-native' -export interface ModalPropsType { - title?: React.ReactNode - visible: boolean - maskClosable?: boolean - closable?: boolean - footer?: Action[] - onClose?: () => void - transparent?: boolean - popup?: boolean +import { StyleProp, TextStyle, ViewStyle } from 'react-native' +import { ModalStyle } from './style/index' + +export interface ModalPropsType { + animateAppear?: boolean + animationDuration?: number animated?: boolean + animationType?: 'none' | 'fade' | 'slide-up' | 'slide-down' | 'slide' + bodyStyle?: StyleProp + children?: React.ReactNode + closable?: boolean + footer?: Action[] locale?: object - animationType?: any + maskClosable?: boolean + modalType?: 'portal' | 'modal' | 'view' onAnimationEnd?: (visible: boolean) => void - animateAppear?: boolean + onClose?: () => void operation?: boolean + onRequestClose?: CallbackOnBackHandler + popup?: boolean + style?: StyleProp + styles?: Partial + title?: React.ReactNode + transparent?: boolean + visible: boolean } export interface Action { diff --git a/components/modal/__tests__/__snapshots__/demo.test.js.snap b/components/modal/__tests__/__snapshots__/demo.test.js.snap index 33f7d0ce4..2a418846f 100644 --- a/components/modal/__tests__/__snapshots__/demo.test.js.snap +++ b/components/modal/__tests__/__snapshots__/demo.test.js.snap @@ -9,6 +9,251 @@ exports[`renders ./components/modal/demo/basic.tsx correctly 1`] = ` } > + + + + + + + + 切换modalType + + + + \`modalType='modal'\`时将调用原生Modal + + + + + + + + + + portal + + + + + + + + + + - - - `; diff --git a/components/modal/demo/basic.tsx b/components/modal/demo/basic.tsx index 803396192..e95102678 100644 --- a/components/modal/demo/basic.tsx +++ b/components/modal/demo/basic.tsx @@ -1,7 +1,15 @@ /* tslint:disable:no-console */ import React from 'react' import { ScrollView, Text, View } from 'react-native' -import { Button, Modal, Toast, WhiteSpace, WingBlank } from '../../' +import { + Button, + List, + Modal, + Switch, + Toast, + WhiteSpace, + WingBlank, +} from '../../' export default class BasicModalExample extends React.Component { constructor(props: any) { @@ -10,6 +18,7 @@ export default class BasicModalExample extends React.Component { visible: false, visible1: false, visible2: false, + modalType: 'portal', } } @@ -121,6 +130,25 @@ export default class BasicModalExample extends React.Component { ] return ( + + { + this.setState({ modalType: val ? 'modal' : 'portal' }) + }} + checkedChildren="modal" + unCheckedChildren="portal" + /> + }> + 切换modalType + + `modalType='modal'`时将调用原生Modal{' '} + + +