diff --git a/en/teaset.md b/en/teaset.md index ca600179d872ef71780287512338943556351d69..f644c52733068290e2744ebeeca3034d07106be6 100644 --- a/en/teaset.md +++ b/en/teaset.md @@ -103,7 +103,7 @@ The content in this document has been verified under the following environment: ### 1. Theme -Theme provides global styling configuration to unify the application's visual design. +Theme is the component style definition object for Teaset, used to define the default styles for Teaset components. **Static Methods:** @@ -122,170 +122,192 @@ Theme provides global styling configuration to unify the application's visual de ### 2. Label -Label displays text content with multiple preset styles. +Label component is used for text display, generally for a small amount of single-line text. + +- Label component inherits all properties of **[Text](https://reactnative.dev/docs/text.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | type | Label type (default, title, detail, danger). | string | no | iOS/Android | yes | -| size | Font size (lg, md, sm, xs). | string | no | iOS/Android | yes | +| size | Display size (xl, lg, md, sm, xs). | string | no | iOS/Android | yes | | text | Text content. | string/number | no | iOS/Android | yes | -| numberOfLines | Number of display lines. | number | no | iOS/Android | yes | +| numberOfLines | Number of display lines (Inherited from Text component and modified default value). | number | no | iOS/Android | yes | ### 3. Button -Button offers multiple button styles. +Button component defines a button that is visible, touchable, and has touch feedback. + +- Button component inherits all properties and events of **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | type | Button type (default, primary, secondary, danger, link). | string | no | iOS/Android | yes | -| size | Button size (lg, md, sm, xs). | string | no | iOS/Android | yes | +| size | Display size (xl, lg, md, sm, xs). | string | no | iOS/Android | yes | | title | Button title. | string/number/element | no | iOS/Android | yes | -| titleStyle | Style for the title. | style | no | iOS/Android | yes | -| disabled | Disable the button. | bool | no | iOS/Android | yes | +| titleStyle | Style for the title (Invalid when title type is element). | style | no | iOS/Android | yes | +| disabled | Disable the button (When true, the component is displayed as semi-transparent and not touchable). | bool | no | iOS/Android | yes | | onPress | Press handler. | function | no | iOS/Android | yes | ### 4. Checkbox -Checkbox supports single or multiple selection. +Checkbox component defines a checkbox with two states: checked and unchecked. + +- Checkbox component inherits all properties and events of **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | checked | Whether the checkbox is selected. | bool | no | iOS/Android | yes | | defaultChecked | Default selection state. | bool | no | iOS/Android | yes | -| size | Icon size (lg, md, sm). | string | no | iOS/Android | yes | +| size | Display size (lg, md, sm). | string | no | iOS/Android | yes | | title | Title text. | string/number/element | no | iOS/Android | yes | -| titleStyle | Style for the title. | style | no | iOS/Android | yes | +| titleStyle | Style for the title (Invalid when title type is element). | style | no | iOS/Android | yes | | checkedIcon | Custom icon for the checked state. | element | no | iOS/Android | yes | | checkedIconStyle | Style for the checked icon. | ImageStyle | no | iOS/Android | yes | | uncheckedIcon | Custom icon for the unchecked state. | element | no | iOS/Android | yes | | uncheckedIconStyle | Style for the unchecked icon. | ImageStyle | no | iOS/Android | yes | -| disabled | Disable the checkbox. | bool | no | iOS/Android | yes | -| hitSlop | Extend the touchable area. | object | no | iOS/Android | yes | +| disabled | Disable the checkbox (Inherited from TouchableOpacity, when true, the component is displayed as semi-transparent and not touchable). | bool | no | iOS/Android | yes | +| hitSlop | Extend the touchable area (Inherited from TouchableOpacity and modified default value). | object | no | iOS/Android | yes | | onChange | State change handler. | function | no | iOS/Android | yes | ### 5. Input -Input handles single-line or multiline text input. +Input component defines an input edit box. + +- Input component inherits all properties and events of **[TextInput](https://reactnative.dev/docs/textinput.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| size | Input size (xl, lg, md, sm). | string | no | iOS/Android | yes | -| disabled | Disable the input. | bool | no | iOS/Android | yes | -| underlineColorAndroid | Underline color on Android. | string/'rgba(0, 0, 0, 0)' | no | Android | yes | +| size | Display size (xl, lg, md, sm). | string | no | iOS/Android | yes | +| disabled | Disable the input (When true, the component is displayed as semi-transparent and not focusable). | bool | no | iOS/Android | yes | +| underlineColorAndroid | Underline color on Android (Inherited from TextInput and modified default value). | string/'rgba(0, 0, 0, 0)' | no | Android | yes | | onChangeText | Text change handler. | function | no | iOS/Android | yes | ### 6. Select -Select behaves like an HTML select dropdown. +Select component defines a selection box. + +- Select component inherits all properties of **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| size | Select size (xl, lg, md, sm). | string | no | iOS/Android | yes | +| size | Display size (xl, lg, md, sm). | string | no | iOS/Android | yes | | value | Selected value. | any | no | iOS/Android | yes | | valueStyle | Style for the selected text. | style | no | iOS/Android | yes | | items | Items in the dropdown. | array | no | iOS/Android | yes | -| getItemValue | Function to retrieve item value. | function | no | iOS/Android | yes | -| getItemText | Function to retrieve item label. | function | no | iOS/Android | yes | +| getItemValue | Function to retrieve item value (Get the value of the items array element, passed parameters are (item, index), item = items[index], default uses item directly). | function | no | iOS/Android | yes | +| getItemText | Function to retrieve item label (Get the display text or React Native component of the items array element, passed parameters are (item, index), item = items[index], default uses item directly). | function | no | iOS/Android | yes | | pickerType | Picker type (auto, pull, popover). | string | no | iOS/Android | yes | -| pickerTitle | Picker title. | string | no | iOS/Android | yes | +| pickerTitle | PullPicker title. | string | no | iOS/Android | yes | | editable | Whether the value is editable. | bool | no | iOS/Android | yes | -| icon | Right-side icon. | element | no | iOS/Android | yes | +| icon | Right-side indicator icon (none: no icon, default: default icon). | string/ImageSource/element | no | iOS/Android | yes | | iconTintColor | Icon tint color. | string | no | iOS/Android | yes | | placeholder | Placeholder text. | string | no | iOS/Android | yes | -| placeholderTextColor | Placeholder text color. | string | no | iOS/Android | yes | +| placeholderTextColor | Placeholder text color (Displayed when value is empty). | string | no | iOS/Android | yes | | disabled | Disable the select. | bool | no | iOS/Android | yes | -| onSelected | Selection handler. | function | no | iOS/Android | yes | +| onSelected | Selection handler (Called when an item in the items array is selected, item = items[index]). | function | no | iOS/Android | yes | ### 7. Stepper -Stepper provides numeric increment and decrement controls. +Stepper component defines a stepper. + +- Stepper component inherits all properties and events of **[View](https://reactnative.dev/docs/view.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| defaultValue | Default value. | number | no | iOS/Android | yes | +| defaultValue | Default value (Used only once when the component is initialized. If you do not want to pass value and listen to onChange to maintain state synchronization, you can use defaultValue instead). | number | no | iOS/Android | yes | | value | Current value. | number | no | iOS/Android | yes | -| step | Step size. | number | no | iOS/Android | yes | -| max | Maximum value. | number | no | iOS/Android | yes | -| min | Minimum value. | number | no | iOS/Android | yes | -| valueStyle | Style for the value text. | style | no | iOS/Android | yes | -| valueFormat | Value formatting function. | function | no | iOS/Android | yes | -| subButton | Custom decrement button. | element | no | iOS/Android | yes | -| addButton | Custom increment button. | element | no | iOS/Android | yes | -| showSeparator | Show separators. | bool | no | iOS/Android | yes | -| disabled | Disable the stepper. | bool | no | iOS/Android | yes | +| step | Step size (Integer or decimal). | number | no | iOS/Android | yes | +| max | Maximum value (No limit by default). | number | no | iOS/Android | yes | +| min | Minimum value (No limit by default). | number | no | iOS/Android | yes | +| valueStyle | Style for the value display. | style | no | iOS/Android | yes | +| valueFormat | Value formatting function (Passed parameter is value, default uses value directly). | function | no | iOS/Android | yes | +| subButton | "Minus" button. | string/element | no | iOS/Android | yes | +| addButton | "Plus" button. | string/element | no | iOS/Android | yes | +| showSeparator | Show separators (Set to false if you need to fully customize the component style). | bool | no | iOS/Android | yes | +| disabled | Disable the stepper (When true, the component is displayed as semi-transparent and not touchable). | bool | no | iOS/Android | yes | | editable | Allow text editing. | bool | no | iOS/Android | yes | -| onChange | Value change handler. | function | no | iOS/Android | yes | +| onChange | Value change handler (Called when the value changes). | function | no | iOS/Android | yes | ### 8. SearchInput -SearchInput is an input field with a search icon. +SearchInput component defines a search input box. The difference from Input is that it has a magnifying glass icon, which is displayed in the center when the content is empty and not in the editing state, otherwise it is left-aligned. + +- SearchInput component inherits all properties and events of **[TextInput](https://reactnative.dev/docs/textinput.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| style | Component style. | ViewStyle | no | iOS/Android | yes | +| style | Component style (Style of the component's container View). | ViewStyle | no | iOS/Android | yes | | inputStyle | Style for the input field. | style | no | iOS/Android | yes | -| iconSize | Icon size. | number | no | iOS/Android | yes | -| disabled | Disable the input. | bool | no | iOS/Android | yes | -| underlineColorAndroid | Underline color on Android. | string/'rgba(0, 0, 0, 0)' | no | Android | yes | +| iconSize | Magnifying glass icon size (Default value is set in Theme). | number | no | iOS/Android | yes | +| disabled | Disable the input (When true, the component is displayed as semi-transparent and not touchable). | bool | no | iOS/Android | yes | +| underlineColorAndroid | Underline color on Android (Inherited from TextInput and modified default value). | string/'rgba(0, 0, 0, 0)' | no | Android | yes | | onChangeText| Text change handler | function | no | iOS/Android | yes | ### 9. Badge -Badge displays notification counts or status indicators. +Badge component defines a badge, which can be used to display numbers, letters, dots, etc. on the corner of an icon, or to display other content. + +- Badge component inherits all properties of **[View](https://reactnative.dev/docs/view.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | type | Badge type (capsule, square, dot). | string | no | iOS/Android | yes | -| count | Number to display. | number | no | iOS/Android | yes | -| countStyle | Style for the count text. | style | no | iOS/Android | yes | -| maxCount | Maximum number before showing a plus sign. | number | no | iOS/Android | yes | +| count | Badge display number. | string/number | no | iOS/Android | yes | +| countStyle | Style for the badge display number. | style | no | iOS/Android | yes | +| maxCount | Maximum display number (When count is greater than this value, it is displayed as maxCount followed by a plus sign, e.g., '99+'. Invalid when count is not a number). | number | no | iOS/Android | yes | ### 10. Popover -Popover displays contextual bubbles. +Popover component defines a popover, which is a rounded rectangular container with a triangular arrow that can be displayed at any position on the border, commonly used for chat message display or pop-up prompts. + +- Popover component inherits all properties of **[View](https://reactnative.dev/docs/view.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | arrow | Arrow position (none, topLeft, top, topRight, rightTop, right, rightBottom, bottomRight, bottom, bottomLeft, leftBottom, left, leftTop). | string | no | iOS/Android | yes | -| paddingCorner | Distance between arrow and corners. | number | no | iOS/Android | yes | +| paddingCorner | Distance between the triangular arrow and the corner (Related to the arrow value, e.g., when arrow = 'topLeft', it represents the distance between the triangular arrow and the top left corner. Default value is set in Theme). | number | no | iOS/Android | yes | ### 11. NavigationBar -NavigationBar renders a top navigation bar. +NavigationBar component defines a page navigation bar, used to display the page title and buttons at the top of the page. + +- NavigationBar component inherits all properties of **[View](https://reactnative.dev/docs/view.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| type | Navigation bar type (auto, ios, android, harmony). | string | no | iOS/Android | yes | -| title | Title content. | string/element | no | iOS/Android | yes | -| titleStyle | Style for the title. | style | no | iOS/Android | yes | -| leftView | Left-side content. | element | no | iOS/Android | yes | -| rightView | Right-side content. | element | no | iOS/Android | yes | -| tintColor | Tint color for left and right buttons. | string | no | iOS/Android | yes | -| background | Background element. | element | no | iOS/Android | yes | -| hidden | Hide the navigation bar. | bool | no | iOS/Android | yes | -| animated | Animate hide/show. | bool | no | iOS/Android | yes | -| statusBarStyle | Status bar style (default, light-content, dark-content). | string | no | iOS/Android | yes | -| statusBarColor | Status bar color. | string | no | iOS/Android | yes | -| statusBarHidden | Hide the status bar. | bool | no | iOS/Android | yes | -| statusBarInsets | Reserve space for the status bar. | bool | no | iOS | yes | +| type | Navigation bar style type (auto, ios, android, harmony). | string | no | iOS/Android | yes | +| title | Navigation bar title (Rendered using component when passing a string). | string/element | no | iOS/Android | yes | +| titleStyle | Style for the navigation bar title (Invalid when title type is element). | style | no | iOS/Android | yes | +| leftView | Navigation bar left view. | element | no | iOS/Android | yes | +| rightView | Navigation bar right view. | element | no | iOS/Android | yes | +| tintColor | Text and image color for left and right views of the navigation bar (Default value is set in Theme). | string | no | iOS/Android | yes | +| background | Navigation bar background view. | element | no | iOS/Android | yes | +| hidden | Whether to hide the navigation bar. | bool | no | iOS/Android | yes | +| animated | Whether to have animation effect when showing/hiding navigation bar and status bar. | bool | no | iOS/Android | yes | +| statusBarStyle | System status bar style (default, light-content, dark-content). | string | no | iOS/Android | yes | +| statusBarColor | Navigation bar background color (Default value is set in Theme). | string | no | iOS/Android | yes | +| statusBarHidden | Whether to hide the system status bar. | bool | no | iOS/Android | yes | +| statusBarInsets | Whether to automatically add status bar placeholder space. | bool | no | iOS | yes | **Static Properties:** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| Title | Title component for the navigation bar. | class | no | iOS/Android | yes | -| Button | Button component for the navigation bar. | class | no | iOS/Android | yes | -| LinkButton | Link-style button component. | class | no | iOS/Android | yes | -| IconButton | Icon button component. | class | no | iOS/Android | yes | -| BackButton | Back button component. | class | no | iOS/Android | yes | +| Title | Navigation bar title component. | class | no | iOS/Android | yes | +| Button | Navigation bar button component. | class | no | iOS/Android | yes | +| LinkButton | Navigation bar link button component, inherits from NavigationBar.Button. | class | no | iOS/Android | yes | +| IconButton | Navigation bar icon button component, inherits from NavigationBar.Button. | class | no | iOS/Android | yes | +| BackButton | Navigation bar back button component, inherits from NavigationBar.Button. | class | no | iOS/Android | yes | **NavigationBar.Title** +- NavigationBar.Title component inherits all properties of **[Text](https://reactnative.dev/docs/text.html)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | text | Display text. | string/number | no | iOS/Android | yes | -| numberOfLines | Number of lines. | number | no | iOS/Android | yes | -| allowFontScaling | Allow system font scaling. | bool | no | iOS | yes | +| numberOfLines | Number of lines (Inherited from Text component and modified default value). | number | no | iOS/Android | yes | +| allowFontScaling | Allow system font scaling (Inherited from Text component and modified default value). | bool | no | iOS | yes | The **allowFontScaling** property depends on the application’s configuration.For the detailed configuration method, refer to [How to configure whether the in-app font size follows the system setting](https://developer.huawei.com/consumer/cn/doc/architecture-guides/common-v1_26-ts_20-0000002298448781) or follow the steps below: @@ -318,48 +340,59 @@ The **allowFontScaling** property depends on the application’s configuration.F **NavigationBar.Button** +- NavigationBar.Button component inherits all properties of **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| hitSlop | Extend the touchable area. | object | no | iOS/Android | yes | +| hitSlop | Extend the touchable area (Inherited from TouchableOpacity component and modified default value). | object | no | iOS/Android | yes | **NavigationBar.LinkButton** +- NavigationBar.LinkButton component inherits all properties of **[NavigationBar.Button](#navigationbar-button-props)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | Button title | string/number | no | iOS/Android | yes | **NavigationBar.IconButton** +- NavigationBar.IconButton component inherits all properties of **[NavigationBar.Button](#navigationbar-button-props)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | icon | Button icon | ImageSource | no | iOS/Android | yes | **NavigationBar.BackButton** +- NavigationBar.BackButton component inherits all properties of **[NavigationBar.Button](#navigationbar-button-props)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| title | Title text. | string/number | no | iOS/Android | yes | +| title | Title text (Default value is set in Theme). | string/number | no | iOS/Android | yes | | icon | Button icon. | ImageSource | no | iOS/Android | yes | + ### 12. ListRow -ListRow displays list items, commonly used on settings screens. +ListRow component is used to display a list row, defining a series of easy-to-use element properties, making it possible to quickly develop applications based on ListView and ScrollView. + +- ListRow component inherits all properties and events of **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | Title content. | string/number/element | no | iOS/Android | yes | | detail | Detail content. | string/number/element | no | iOS/Android | yes | -| titleStyle | Style for the title. | style | no | iOS/Android | yes | -| detailStyle | Style for the detail text. | style | no | iOS/Android | yes | -| detailMultiLine | Allow multiline detail text. | bool | no | iOS/Android | yes | +| titleStyle | Style for the title (Invalid when title type is element). | style | no | iOS/Android | yes | +| detailStyle | Style for the detail text (Invalid when detail type is element). | style | no | iOS/Android | yes | +| detailMultiLine | Allow multiline detail text (Default is true when titlePlace = 'top', otherwise false). | bool | no | iOS/Android | yes | | icon | Left icon. | element/ImageSource | no | iOS/Android | yes | -| accessory | Right accessory (none, auto, empty, indicator, check). | string/element | no | iOS/Android | yes | -| topSeparator | Top separator (none, full, indent). | string | no | iOS/Android | yes | -| bottomSeparator | Bottom separator (none, full, indent). | string | no | iOS/Android | yes | +| accessory | Right indicator icon (**none**: None;
**auto**: Automatic, 'indicator' when onPress property is set, otherwise 'none';
**empty**: Empty, does not display indicator icon, but occupies the space of 'check' or 'indicator';
**check**: Check icon, generally used to indicate that the row is selected;
**indicator**: Greater than sign icon, generally used to indicate clicking this row to open a new page;). | string/element/ImageSource | no | iOS/Android | yes | +| topSeparator | Top separator (none, full, indent) (Indent separator only indents on the left). | string/element | no | iOS/Android | yes | +| bottomSeparator | Bottom separator (none, full, indent) (Indent separator only indents on the left). | string/element | no | iOS/Android | yes | | titlePlace | Title position (left, top, none). | string | no | iOS/Android | yes | -| swipeActions | Swipe action buttons. | array | no | iOS/Android | yes | +| swipeActions | List of action buttons displayed when swiping left (Recommended to use ListRow.SwipeActionButton component). | array | no | iOS/Android | yes | +| activeOpacity | Opacity on press (Inherited from TouchableOpacity and modified default value, default is 0.2 when onPress is passed, otherwise 1). | number | no | iOS/Android | yes | | onPress | Press handler. | function | no | iOS/Android | yes | -| activeOpacity | Opacity on press. | number | no | iOS/Android | yes | **Static Properties:** @@ -369,39 +402,45 @@ ListRow displays list items, commonly used on settings screens. **ListRow.SwipeActionButton** +- SwipeActionButton component inherits all properties of **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| type | Display style (default, danger). | string | no | iOS/Android | yes | +| type | Display style type (default, danger). | string | no | iOS/Android | yes | | title | Title content. | string/number/element | no | iOS/Android | yes | -| titleStyle | Style for the title. | style | no | iOS/Android | yes | +| titleStyle | Style for the title (Invalid when title type is element). | style | no | iOS/Android | yes | ### 13. Carousel -Carousel provides an image slideshow. +Carousel component defines a carousel component, generally used for image or information page rotation, and can also be used for content pagination display. + +- Carousel component inherits all properties and events of **[ScrollView](https://reactnative.dev/docs/scrollview.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| carousel | Enable auto-play. | bool | no | iOS/Android | yes | -| interval | Auto-play interval in milliseconds. | number | no | iOS/Android | yes | -| direction | Play direction (forward, backward). | string | no | iOS/Android | yes | +| carousel | Whether to enable carousel (When false, stop carousel, you can call scrollToPage or scrollToNextPage method to scroll to the page). | bool | no | iOS/Android | yes | +| interval | Interval time per page (Unit is milliseconds, valid when carousel = true). | number | no | iOS/Android | yes | +| direction | Play direction (Valid when carousel = true)
**forward**: Forward carousel, page scrolls from right to left;
**backward**: Backward carousel, page scrolls from left to right. | string | no | iOS/Android | yes | | startIndex | Initial page index. | number | no | iOS/Android | yes | -| cycle | Loop playback. | bool | no | iOS/Android | yes | -| control | Page indicator. | bool/element | no | iOS/Android | yes | -| horizontal | Horizontal scrolling. | bool | no | iOS/Android | yes | -| pagingEnabled | Enable paging. | bool | no | iOS/Android | yes | -| showsHorizontalScrollIndicator | Show horizontal scroll indicator. | bool | no | iOS/Android | yes | -| showsVerticalScrollIndicator | Show vertical scroll indicator. | bool | no | iOS/Android | yes | -| alwaysBounceHorizontal | Always allow horizontal bounce. | bool | no | iOS/Android | yes | -| alwaysBounceVertical | Always allow vertical bounce. | bool | no | iOS/Android | yes | -| bounces | Enable bounce effect. | bool | no | iOS/Android | yes | -| automaticallyAdjustContentInsets | Auto-adjust content insets. | bool | no | iOS/Android | yes | -| scrollEventThrottle | Scroll event throttle interval. | number | no | iOS/Android | yes | +| cycle | Whether to loop playback (Valid when carousel = true). | bool | no | iOS/Android | yes | +| control | Page indicator (When true, display default page controller, you can also pass custom page controller, recommended to use Carousel.Control component). | bool/element | no | iOS/Android | yes | +| horizontal | Horizontal scrolling (Inherited from ScrollView and modified default value). | bool | no | iOS/Android | yes | +| pagingEnabled | Enable paging (Inherited from ScrollView and modified default value). | bool | no | iOS/Android | yes | +| showsHorizontalScrollIndicator | Show horizontal scroll indicator (Inherited from ScrollView and modified default value). | bool | no | iOS/Android | yes | +| showsVerticalScrollIndicator | Show vertical scroll indicator (Inherited from ScrollView and modified default value). | bool | no | iOS/Android | yes | +| alwaysBounceHorizontal | Always allow horizontal bounce (Inherited from ScrollView and modified default value). | bool | no | iOS/Android | yes | +| alwaysBounceVertical | Always allow vertical bounce (Inherited from ScrollView and modified default value). | bool | no | iOS/Android | yes | +| bounces | Enable bounce effect (Inherited from ScrollView and modified default value). | bool | no | iOS/Android | yes | +| automaticallyAdjustContentInsets | Auto-adjust content insets (Inherited from ScrollView and modified default value). | bool | no | iOS/Android | yes | +| scrollEventThrottle | Scroll event throttle interval (Inherited from ScrollView and modified default value). | number | no | iOS/Android | yes | | onChange | Page change handler. | function | no | iOS/Android | yes | | scrollToPage | Scroll to a specific page. | function | no | iOS/Android | yes | | scrollToNextPage | Scroll to the next page. | function | no | iOS/Android | yes | **Carousel.Control Component:** +- Carousel.Control component inherits all properties of **[View](https://reactnative.dev/docs/view.html)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | dot | Page indicator dot element. | element | no | iOS/Android | yes | @@ -409,29 +448,33 @@ Carousel provides an image slideshow. ### 14. Projector -Projector displays multi-page content with view caching. +Projector component defines a projector component, which is a multi-page display component that automatically maintains state and has view caching function. Switching pages is like switching projector films, the content and state of the original page will not disappear, and it will be presented as is when switching back to this page without re-rendering. + +- Projector component inherits all properties of **[View](https://reactnative.dev/docs/view.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| index | Current index. | number | no | iOS/Android | yes | -| slideStyle | Slide style. | ViewStyle | no | iOS/Android | yes | +| index | Current film (page) index. | number | no | iOS/Android | yes | +| slideStyle | Film (page) style. | ViewStyle | no | iOS/Android | yes | ### 15. SegmentedBar -SegmentedBar renders a segmented toolbar. +SegmentedBar component defines a segmented toolbar component, which can be used with or to achieve segmented display of multiple contents on the same page. + +- SegmentedBar component inherits all properties and events of **[View](https://reactnative.dev/docs/view.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| justifyItem | Item layout (fixed, scrollable). | string | no | iOS/Android | yes | -| indicatorType | Indicator type (none, boxWidth, itemWidth, customWidth). | string | no | iOS/Android | yes | -| indicatorPosition | Indicator position (top, bottom). | string | no | iOS/Android | yes | -| indicatorLineColor | Indicator line color. | string | no | iOS/Android | yes | -| indicatorLineWidth | Indicator line height. | number | no | iOS/Android | yes | -| indicatorWidth | indicator width. | number | no | iOS/Android | yes | -| indicatorPositionPadding | Indicator position padding. | number | no | iOS/Android | yes | -| animated | Enable animation. | bool | no | iOS/Android | yes | -| autoScroll | Auto-scroll to center. | bool | no | iOS/Android | yes | -| activeIndex | Active index. | number | no | iOS/Android | yes | +| justifyItem | Item layout mode. (
**fixed**: Fixed position equal width arrangement;
**scrollable**: Scrollable, use this mode when there are many Items and they cannot be displayed on one screen). | string | no | iOS/Android | yes | +| indicatorType | Active indicator type. (
**none**: None
**boxWidth**: Equal division interval width
**itemWidth**: Item content width
**customWidth**: Specified width). | string | no | iOS/Android | yes | +| indicatorPosition | Active indicator position (top, bottom). | string | no | iOS/Android | yes | +| indicatorLineColor | Indicator line color (Default value is set in Theme). | string | no | iOS/Android | yes | +| indicatorLineWidth | Indicator line height (Default value is set in Theme). | number | no | iOS/Android | yes | +| indicatorWidth | Active indicator line width (Effective when indicatorType is customWidth). | number | no | iOS/Android | yes | +| indicatorPositionPadding | Distance between active indicator and top or bottom border (Default value is set in Theme). | number | no | iOS/Android | yes | +| animated | Whether there is animation effect when changing active Item. | bool | no | iOS/Android | yes | +| autoScroll | Whether to automatically scroll active Item to the center of the container (Valid only when justifyItem is 'scrollable'). | bool | no | iOS/Android | yes | +| activeIndex | Active Item index. | number | no | iOS/Android | yes | | onChange | Selection change handler. | function | no | iOS/Android | yes | **Static Properties:** @@ -442,32 +485,36 @@ SegmentedBar renders a segmented toolbar. **SegmentedBar.Item Properties:** +- SegmentedBar.Item component inherits all properties of **[View](https://reactnative.dev/docs/view.html)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | Title content. | string/number/element | no | iOS/Android | yes | -| titleStyle | Style for the title. | style | no | iOS/Android | yes | -| activeTitleStyle | Style for the active title. | style | no | iOS/Android | yes | -| badge | Badge content. | string/number/element | no | iOS/Android | yes | +| titleStyle | Style for the title (Invalid when title type is element). | style | no | iOS/Android | yes | +| activeTitleStyle | Style for the active title (Invalid when title type is element). | style | no | iOS/Android | yes | +| badge | Badge content (Rendered using `` component when it is string or number). | string/number/element | no | iOS/Android | yes | | active | Whether the item is active. | bool | no | iOS/Android | yes | ### 16. SegmentedView -SegmentedView is a segmented container. +SegmentedView component defines a segmented container component, generally used for segmented display of multiple contents on the same page.
SegmentedView component is an easy-to-use encapsulated composite component of ``, `` / ``. + +- SegmentedView component inherits all properties and events of **[View](https://reactnative.dev/docs/view.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| type | SegmentedView type (projector, carousel). | string | no | iOS/Android | yes | -| barPosition | Toolbar position (top, bottom). | string | no | iOS/Android | yes | -| barStyle | Toolbar style. | style | no | iOS/Android | yes | -| justifyItem | Item width distribution (fixed, scrollable). | string | no | iOS/Android | yes | -| indicatorType | Indicator type (none, boxWidth, itemWidth). | string | no | iOS/Android | yes | -| indicatorPosition | Indicator position (top, bottom). | string | no | iOS/Android | yes | -| indicatorLineColor | Indicator line color. | string | no | iOS/Android | yes | -| indicatorLineWidth | Indicator line height. | number | no | iOS/Android | yes | -| indicatorPositionPadding | Indicator position padding. | number | no | iOS/Android | yes | -| animated | Enable animation. | bool | no | iOS/Android | yes | -| autoScroll | Enable auto-scroll. | bool | no | iOS/Android | yes | -| activeIndex | Active index. | number | no | iOS/Android | yes | +| type | SegmentedView type. (
**projector**: Projector, content page is rendered using `` component
**carousel**: Carousel, content page is rendered using `` component). | string | no | iOS/Android | yes | +| barPosition | Segmented toolbar position (top, bottom). | string | no | iOS/Android | yes | +| barStyle | Segmented toolbar style. | style | no | iOS/Android | yes | +| justifyItem | Item layout mode. (
**fixed**: Fixed position equal width arrangement;
**scrollable**: Scrollable, use this mode when there are many Items and they cannot be displayed on one screen). | string | no | iOS/Android | yes | +| indicatorType | Segmented toolbar active indicator type. (
**none**: None
**boxWidth**: Equal division interval width
**itemWidth**: Item content width). | string | no | iOS/Android | yes | +| indicatorPosition | Segmented toolbar active indicator position (top, bottom). | string | no | iOS/Android | yes | +| indicatorLineColor | Active indicator color (Default value is set in Theme). | string | no | iOS/Android | yes | +| indicatorLineWidth | Active indicator line width (Default value is set in Theme). | number | no | iOS/Android | yes | +| indicatorPositionPadding | Distance between active indicator and top or bottom border (Default value is set in Theme). | number | no | iOS/Android | yes | +| animated | Whether there is animation effect when changing active Item in segmented toolbar. | bool | no | iOS/Android | yes | +| autoScroll | Whether to automatically scroll active Item to the center of the container in segmented toolbar (Valid only when justifyItem is 'scrollable'). | bool | no | iOS/Android | yes | +| activeIndex | Segmented toolbar active Item index. | number | no | iOS/Android | yes | | onChange | Page change handler. | function | no | iOS/Android | yes | **Static Properties:** @@ -478,30 +525,34 @@ SegmentedView is a segmented container. **SegmentedView.Sheet Properties:** +- SegmentedView.Sheet component inherits all properties of **[View](https://reactnative.dev/docs/view.html)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | Title content. | string/number/element | no | iOS/Android | yes | -| titleStyle | Style for the title. | style | no | iOS/Android | yes | -| activeTitleStyle | Style for the active title. | style | no | iOS/Android | yes | -| badge | Badge content. | string/number/element | no | iOS/Android | yes | +| titleStyle | Style for the title (Invalid when title type is element). | style | no | iOS/Android | yes | +| activeTitleStyle | Style for the active title (Invalid when title type is element). | style | no | iOS/Android | yes | +| badge | Badge content (Rendered using `` component when it is string or number). | string/number/element | no | iOS/Android | yes | ### 17. TabView -TabView provides bottom tab navigation. +TabView component defines a tab page component, used to display multiple sub-pages on one page, switching sub-pages through the TabBar at the bottom of the page. + +- TabView component inherits all properties and events of **[View](https://reactnative.dev/docs/view.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| type | TabView type (projector, carousel). | string | no | iOS/Android | yes | -| barStyle | TabBar style. | style | no | iOS/Android | yes | -| activeIndex | Active sheet index. | number | no | iOS/Android | yes | -| onChange | Page change handler. | function | no | iOS/Android | yes | +| type | Tab page type. (
**projector**: Projector, sub-page is rendered using `` component
**carousel**: Carousel, sub-page is rendered using `` component). | string | no | iOS/Android | yes | +| barStyle | TabBar toolbar style. | style | no | iOS/Android | yes | +| activeIndex | Active Sheet index. | number | no | iOS/Android | yes | +| onChange | Page change handler (Called when changing the current page, index is the current Sheet index). | function | no | iOS/Android | yes | **Static Properties:** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| Sheet | TabView sheet component. | class | no | iOS/Android | yes | -| Button | TabView button component. | class | no | iOS/Android | yes | +| Sheet | Tab page Sheet component. | class | no | iOS/Android | yes | +| Button | Tab page button component (This component is automatically rendered by the Sheet component, no need to explicitly declare in code, but you can modify TabView.Button to a custom class to change the tab page button component). | class | no | iOS/Android | yes | **TabView.Sheet Properties:** @@ -509,206 +560,238 @@ TabView provides bottom tab navigation. | ---- | ----------- | ---- | -------- | -------- | ------------------ | | type | Sheet type (sheet, button). | string | no | iOS/Android | yes | | title | Title content. | string/number/element | no | iOS/Android | yes | -| icon | Icon content. | ImageSource/element | no | iOS/Android | yes | +| icon | Active state button icon. | ImageSource/element | no | iOS/Android | yes | | activeIcon | Active icon content. | ImageSource/element | no | iOS/Android | yes | -| badge | Badge content. | string/number/element | no | iOS/Android | yes | +| badge | Badge content (Rendered using `` component when it is string or number). | string/number/element | no | iOS/Android | yes | | onPress | Press handler. | function | no | iOS/Android | yes | **TabView.Button Properties:** +- TabView.Button component inherits all properties of **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | Title content. | string/number/element | no | iOS/Android | yes | -| titleStyle | Style for the title. | style | no | iOS/Android | yes | -| activeTitleStyle | Style for the active title. | style | no | iOS/Android | yes | -| icon | Icon content. | ImageSource/element | no | iOS/Android | yes | -| activeIcon | Active icon content. | ImageSource/element | no | iOS/Android | yes | -| badge | Badge content. | string/number/element | no | iOS/Android | yes | +| titleStyle | Style for the title (Invalid when title type is element). | style | no | iOS/Android | yes | +| activeTitleStyle | Style for the active title (Invalid when title type is element). | style | no | iOS/Android | yes | +| icon | Button icon. | ImageSource/element | no | iOS/Android | yes | +| activeIcon | Active state button icon. | ImageSource/element | no | iOS/Android | yes | +| badge | Badge content (Rendered using `` component when it is string or number). | string/number/element | no | iOS/Android | yes | | active | Active state. | bool | no | iOS/Android | yes | ### 18. TransformView -TransformView supports zooming and dragging. +TransformView component defines a transformable view, supporting pinch-to-zoom and single-finger pan gestures. + +- TransformView component inherits all properties and events of **[View](https://reactnative.dev/docs/view.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| containerStyle | Container style. | style | no | iOS/Android | yes | -| maxScale | Maximum scale. | number | no | iOS/Android | yes | -| minScale | Minimum scale. | number | no | iOS/Android | yes | -| magnetic | Magnetic edges. | bool | no | iOS/Android | yes | -| tension | Drag tension coefficient. | number | no | iOS/Android | yes | -| onWillTransform | Event before transform starts. | function | no | iOS/Android | yes | -| onTransforming | Event during transform. | function | no | iOS/Android | yes | -| onDidTransform | Event after transform ends. | function | no | iOS/Android | yes | -| onWillMagnetic | Event before magnetic effect. | function | no | iOS/Android | yes | -| onDidMagnetic | Event after magnetic effect. | function | no | iOS/Android | yes | -| onPress | Press handler. | function | no | iOS/Android | yes | -| onLongPress | Long-press handler. | function | no | iOS/Android | yes | +| containerStyle | Internal container style. | style | no | iOS/Android | yes | +| maxScale | Maximum zoom scale. | number | no | iOS/Android | yes | +| minScale | Minimum zoom scale. | number | no | iOS/Android | yes | +| magnetic | Magnetic edges (Automatically zoom in to view size when the size after zooming is smaller than the view size). | bool | no | iOS/Android | yes | +| tension | Drag tension coefficient (Resistance effect when dragging the image edge inside the view). | number | no | iOS/Android | yes | +| onWillTransform | Transform starts (Three parameters are x coordinate, y coordinate, zoom scale). | function | no | iOS/Android | yes | +| onTransforming | Transform in progress (Three parameters are x coordinate, y coordinate, zoom scale). | function | no | iOS/Android | yes | +| onDidTransform | Transform ends (Three parameters are x coordinate, y coordinate, zoom scale). | function | no | iOS/Android | yes | +| onWillMagnetic | Called before magnetic border effect starts (Return true to allow magnetic border effect, otherwise prevent it, valid when magnetic = true). | function | no | iOS/Android | yes | +| onDidMagnetic | Called when magnetic border effect ends (Three parameters are x coordinate, y coordinate, zoom scale). | function | no | iOS/Android | yes | +| onPress | Click event (Called when touch ends, consistent with TouchableOpacity.onPress). | function | no | iOS/Android | yes | +| onLongPress | Long press event (Called when pressing the component for more than 500ms, consistent with TouchableOpacity.onLongPress). | function | no | iOS/Android | yes | ### 19. AlbumView -AlbumView provides an image gallery experience. +AlbumView component defines an album view, supporting multi-image left-right switching display, pinch-to-zoom, and single-finger pan gestures. + +- AlbumView component inherits all properties and events of **[View](https://reactnative.dev/docs/view.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| images | Image array. | array | yes | iOS/Android | yes | -| thumbs | Thumbnail array. | array | no | iOS/Android | yes | -| index | Current index. | number | no | iOS/Android | yes | -| defaultIndex | Default index. | number | no | iOS/Android | yes | +| images | Album image array (Array elements are ImageSource or React Native components). | array | yes | iOS/Android | yes | +| thumbs | Album thumbnail array (Array elements are ImageSource). | array | no | iOS/Android | yes | +| index | Display image index (Setting this property requires listening to onChange event and maintaining state yourself). | number | no | iOS/Android | yes | +| defaultIndex | Default display image index. | number | no | iOS/Android | yes | | maxScale | Maximum zoom scale. | number | no | iOS/Android | yes | -| space | Spacing between images. | number | no | iOS/Android | yes | -| control | Page indicator. | element | no | iOS/Android | yes | -| onWillChange | Event before page change. | function | no | iOS/Android | yes | -| onChange | Page change handler. | function | no | iOS/Android | yes | -| onPress | Press handler. | function | no | iOS/Android | yes | -| onLongPress | Long-press handler. | function | no | iOS/Android | yes | -| onWillLoadImage | Event before loading an image. | function | no | iOS/Android | yes | -| onLoadImageSuccess | Event when an image loads successfully. | function | no | iOS/Android | yes | -| onLoadImageFailure | Event when an image fails to load. | function | no | iOS/Android | yes | +| space | Spacing between album images. | number | no | iOS/Android | yes | +| control | Page controller (When true, display default page controller, you can also pass custom page controller, recommended to use Carousel.Control component). | element | no | iOS/Android | yes | +| onWillChange | Called before changing the current page (index is the current page index value, newIndex is the page index value to be changed). | function | no | iOS/Android | yes | +| onChange | Called after changing the current page (index is the changed page index value, oldIndex is the page index value before change). | function | no | iOS/Android | yes | +| onPress | Click event (Called when touch ends). | function | no | iOS/Android | yes | +| onLongPress | Long press event (Called when pressing the component for more than 500ms). | function | no | iOS/Android | yes | +| onWillLoadImage | Called before loading image. | function | no | iOS/Android | yes | +| onLoadImageSuccess | Called when image loads successfully. | function | no | iOS/Android | yes | +| onLoadImageFailure | Called when image fails to load. | function | no | iOS/Android | yes | ### 20. Wheel -Wheel is a picker with a wheel interface. +Wheel component defines a wheel, which can be used for wheel-style selectors. + +- Wheel component inherits all properties and events of **[View](https://reactnative.dev/docs/view.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| items | Options array. | array | yes | iOS/Android | yes | -| itemStyle | Style for items. | style | no | iOS/Android | yes | -| holeStyle | Style for the active window. | style | no | iOS/Android | yes | -| maskStyle | Style for the masking areas. | style | no | iOS/Android | yes | -| holeLine | Divider style for the active window. | string | no | iOS/Android | yes | -| index | Current index. | number | no | iOS/Android | yes | -| defaultIndex | Default index. | number | no | iOS/Android | yes | -| onChange | Selection change handler. | function | no | iOS/Android | yes | +| items | Options list (Array elements can be strings, numbers, or React Native components). | array | yes | iOS/Android | yes | +| itemStyle | Style for items (Invalid when items array elements are React Native components). | style | no | iOS/Android | yes | +| holeStyle | Style for the active window (Need to specify height property). | style | no | iOS/Android | yes | +| maskStyle | Style for the masking areas (top and bottom). | style | no | iOS/Android | yes | +| holeLine | Divider for the active window. | number/element | no | iOS/Android | yes | +| index | Current index (Setting this property requires listening to onChange event and maintaining state yourself). | number | no | iOS/Android | yes | +| defaultIndex | Default current item index value (Used only once when the component is created. If you do not want to set index and maintain state, you can pass the initial item index value in this property). | number | no | iOS/Android | yes | +| onChange | Called after changing the current item (index is the changed current item index value). | function | no | iOS/Android | yes | + ### 21. Overlay -Overlay displays floating layers. +Overlay is a static class for floating layers, which is a very important part of Teaset. + +Generally speaking, the content display page is a two-dimensional plane structure. There are some auxiliary UI interfaces, such as menus, prompt boxes, selection list boxes, etc., which are not part of the main content, but are indispensable. A lot of time needs to be invested in developing this part of the code during development, and this part of the code will be mixed with the code of the main content, increasing the complexity of code maintenance. + +Overlay makes React Native development change from two-dimensional to three-dimensional. You can cover any layer of floating layers on the page, and the floating layer interface uses function methods to activate display. You can completely separate the floating layer code from the JSX of the page main content. + +In addition, Overlay supports a variety of animation effects, such as fade in and fade out, pop up, drawer effect, etc., making your interaction vivid. **Static Methods:** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | Show an overlay view. | function | yes | iOS/Android | yes | -| hide | Hide the overlay view. | function | yes | iOS/Android | yes | +| show | Show an overlay view (Input parameter overlayView is the overlay view, recommended to use Overlay.View component, returns a unique overlay key value). | function | yes | iOS/Android | yes | +| hide | Hide an overlay view (Input parameter key is the overlay key value). | function | yes | iOS/Android | yes | **Static Properties:** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| View | Overlay view component. | class | yes | iOS/Android | yes | -| PullView | Overlay with pull effect. | class | no | iOS/Android | yes | -| PopView | Overlay with pop effect. | class | no | iOS/Android | yes | -| PopoverView | Overlay with popover effect. | class | no | iOS/Android | yes | +| View | Overlay view component (Components passed to Overlay.show function should be Overlay.View component or components inherited from Overlay.View. Overlay.View is the root component of the overlay, you can display any content on it). | class | yes | iOS/Android | yes | +| PullView | Overlay with pull effect (Inherits from Overlay.View, has a drawer-like pull effect). | class | no | iOS/Android | yes | +| PopView | Overlay with pop effect (Inherits from Overlay.View). | class | no | iOS/Android | yes | +| PopoverView | Overlay with popover effect (Inherits from Overlay.View). | class | no | iOS/Android | yes | + **Overlay.View** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | style | Overlay style. | style | no | iOS/Android | yes | -| modal | Modal overlay. | bool | no | iOS/Android | yes | -| animated | Enable animation. | bool | no | iOS/Android | yes | -| overlayOpacity | Background opacity. | number | no | iOS/Android | yes | +| modal | Whether it is a modal overlay (Non-modal overlay can be closed by clicking the translucent area outside the content, modal overlay needs to be closed manually by code). | bool | no | iOS/Android | yes | +| animated | Whether to support animation effect. | bool | no | iOS/Android | yes | +| overlayOpacity | Overlay non-content area opacity (Value from 0 to 1, opacity from fully transparent to opaque. Default value is set in Theme). | number | no | iOS/Android | yes | | overlayPointerEvents | Background pointer events (auto, none). | string | no | iOS/Android | yes | -| autoKeyboardInsets | Auto-adjust for keyboard. | bool | no | iOS/Android | yes | -| onAppearCompleted | Event after appearing finishes. | function | no | iOS/Android | yes | -| onDisappearCompleted | Event after disappearing finishes. | function | no | iOS/Android | yes | -| onCloseRequest | Close request handler(Called when tapping the translucent area outside the content). | function | no | iOS/Android | yes | +| autoKeyboardInsets | Whether to automatically reduce keyboard height space when keyboard pops up. | bool | no | iOS/Android | yes | +| onAppearCompleted | Called when the overlay display is complete. | function | no | iOS/Android | yes | +| onDisappearCompleted | Called after the overlay is hidden. | function | no | iOS/Android | yes | +| onCloseRequest | Overlay close request event (Called when clicking the translucent area outside the content, if this value is set, modal will be invalid). | function | no | iOS/Android | yes | + **Overlay.PullView** -Inherits all Overlay.View properties and adds: +- Overlay.PullView component inherits all properties and events of **[Overlay.View](#overlay-view)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| side | Drawer direction (top, bottom, left, right). | string | no | iOS/Android | yes | -| containerStyle | Container style. | style | no | iOS/Android | yes | -| rootTransform | Root transform (none, translate, scale). | string/array | no | iOS/Android | yes | +| side | Drawer popup direction (top, bottom, left, right). | string | no | iOS/Android | yes | +| containerStyle | Drawer container style. | style | no | iOS/Android | yes | +| rootTransform | Root component transform animation when overlay pops up (
**none**: No transform
**translate**: Displacement transform, move the root component in the direction of overlay popup
**scale**: Scale transform, scale factor is defined in Theme
**Transform** currently supports translateX, translateY, scaleX, scaleY, type definition:
type Transform {
  translateX: number,
  translateY: number,
  scaleX: number,
  scaleY: number,
}
). | string/array | no | iOS/Android | yes | +| animated | Whether to support animation effect (Inherited from Overlay.View and modified default property). | style | no | iOS/Android | yes | **Overlay.PopView** -Inherits all Overlay.View properties and adds: +- Overlay.PopView component inherits all properties and events of **[Overlay.View](#overlay-view)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| type | Display type (zoomOut, zoomIn, custom). | string | no | iOS/Android | yes | -| containerStyle | Container style. | style | no | iOS/Android | yes | -| customBounds | Custom bounds. | object | no | iOS/Android | yes | +| type | Popup effect. (
**zoomOut**: Zoom out, popup box zooms in and then animates to original size
**zoomIn**: Zoom in, popup box zooms out and then animates to original size
**custom**: Custom, popup box animates from customBounds position and size to original size). | string | no | iOS/Android | yes | +| containerStyle | Popup box container style. | style | no | iOS/Android | yes | +| customBounds | Popup box animation transition start position and size (Valid when type = 'custom'.
type Rect {
  x: number,
  y: number,
  width: number,
  height: number,
}). | object | no | iOS/Android | yes | +| animated | Whether to support animation effect (Inherited from Overlay.View and modified default property). | style | no | iOS/Android | yes | + **Overlay.PopoverView** -Inherits all Overlay.View properties and adds: +Overlay.PopoverView component inherits all properties and events of **[Overlay.View](#overlay-view)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | popoverStyle | Popover style. | style | no | iOS/Android | yes | -| fromBounds | Origin bounds. | object | yes | iOS/Android | yes | +| fromBounds | Popup bubble source component bounds, the bubble arrow will point to this component.
type Rect {
  x: number,
  y: number,
  width: number,
  height: number,
} | object | yes | iOS/Android | yes | | direction | Arrow direction (up, down, left, right). | string | no | iOS/Android | yes | -| autoDirection | Auto-adjust direction. | bool | no | iOS/Android | yes | -| directionInsets | Direction offset. | number | no | iOS/Android | yes | -| align | Alignment (start, center, end). | string | no | iOS/Android | yes | -| alignInsets | Alignment offset. | number | no | iOS/Android | yes | -| showArrow | Show arrow. | bool | no | iOS/Android | yes | -| paddingCorner | Corner padding. | number | no | iOS/Android | yes | -| overlayOpacity | Popover opacity. | number | no | iOS/Android | yes | +| autoDirection | Whether to automatically adjust popup direction (When true, if there is not enough screen space in the popup direction, it will pop up in the opposite direction. For example, when direction = 'down', if there is not enough space below fromBounds, it will pop up above.). | bool | no | iOS/Android | yes | +| directionInsets | Distance between bubble and popup component fromBounds. | number | no | iOS/Android | yes | +| align | Alignment of bubble and popup component fromBounds. (
**start**: Start alignment, top or left
**center**: Center alignment
**end**: End alignment, bottom or right). | string | no | iOS/Android | yes | +| alignInsets | Alignment direction offset. | number | no | iOS/Android | yes | +| showArrow | Whether to show bubble arrow. | bool | no | iOS/Android | yes | +| paddingCorner | Distance between arrow and alignment corner (Default value is set in Theme). | number | no | iOS/Android | yes | +| overlayOpacity | Bubble opacity (Inherited from Overlay.View and modified default value). | number | no | iOS/Android | yes | ### 22. Toast -Toast shows lightweight notifications. +Toast is a static class for lightweight notifications, similar to Android's Toast. +Toast is implemented based on [Overlay](#overlay){}. + +- Toast inherits all static methods of **[Overlay](#overlay)**. **Static Methods:** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | Show a toast. | function | no | iOS/Android | yes | -| message | Show a message toast. | function | no | iOS/Android | yes | -| success | Show a success toast. | function | no | iOS/Android | yes | -| fail | Show a failure toast. | function | no | iOS/Android | yes | -| smile | Show a smile toast. | function | no | iOS/Android | yes | -| sad | Show a sad toast. | function | no | iOS/Android | yes | -| info | Show an info toast. | function | no | iOS/Android | yes | -| stop | Show a stop toast. | function | no | iOS/Android | yes | +| show | Show a toast, overrides the function of the same name in Overlay{}, input parameter options is a collection of duration and [ToastView](#toasttoastview--props) properties, returns a unique overlay key value.
**Generally not called directly** | function | no | iOS/Android | yes | +| message | Show a plain text toast message. (
duration defaults to 'short', position defaults to 'bottom'.
Default values can be modified via Toast.messageDefaultDuration, Toast.messageDefaultPosition). | function | no | iOS/Android | yes | +| success | Show a success toast, with a check icon in the prompt box. (
duration defaults to 'short', position defaults to 'center'.
Default values can be modified via Toast.defaultDuration, Toast.defaultPosition)
**Same below** | function | no | iOS/Android | yes | +| fail | Show a failure toast, with a cross icon in the prompt box. | function | no | iOS/Android | yes | +| smile | Show a smile toast, with a smile face icon in the prompt box. | function | no | iOS/Android | yes | +| sad | Show a sad toast, with a sad face icon in the prompt box. | function | no | iOS/Android | yes | +| info | Show an info toast, with an Info icon in the prompt box. | function | no | iOS/Android | yes | +| stop | Show a stop toast, with a stop icon in the prompt box. | function | no | iOS/Android | yes | **Static Properties:** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | |ToastView| Toast content display component | class | yes | iOS/Android | yes | -| defaultDuration | Default toast duration. | string | no | iOS/Android | yes | -| defaultPosition | Default toast position. | string | no | iOS/Android | yes | -| messageDefaultDuration | Default duration for the message function. | string | no | iOS/Android | yes | -| messageDefaultPosition | Default position for the message function. | string | no | iOS/Android | yes | +| defaultDuration | Default value for duration parameter of success, fail, smile, sad, info, stop functions, toast display duration. (
**short**: 2000ms
**long**: 3500ms). | string | no | iOS/Android | yes | +| defaultPosition | Default value for position parameter of success, fail, smile, sad, info, stop functions, toast display position (See [Toast.ToastView](#toasttoastview--props)). | string | no | iOS/Android | yes | +| messageDefaultDuration | Default value for duration parameter of message function. | string | no | iOS/Android | yes | +| messageDefaultPosition | Default value for position parameter of message function. | string | no | iOS/Android | yes | + **Toast.ToastView** +- Toast.ToastView component inherits all properties of **[View](https://reactnative.dev/docs/view.html)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | text | Toast text. | string/number/element | no | iOS/Android | yes | -| icon | Icon (none, success, fail, smile, sad, info, stop). | string/ImageSource/element | no | iOS/Android | yes | -| position | Toast position (top, bottom, center). | string | no | iOS/Android | yes | +| icon | Icon (
**none**: No icon
**success**: Success, check icon
**fail**: Failure, cross icon
**smile**: Smile face icon
**sad**: Sad face icon
**info**: Info, letter "i" in a circle
**stop**: Stop, exclamation mark "!" in a circle). | string/ImageSource/element | no | iOS/Android | yes | +| position | Toast display position (
**top**: Top of the window
**bottom**: Bottom of the window
**center**: Center of the window
top, bottom positions can be set in Theme). | string | no | iOS/Android | yes | ### 23. ActionSheet -ActionSheet shows a bottom action sheet. +ActionSheet is a static class for action sheets, generally used to trigger a multi-item sub-operation for user selection, presented as a drawer dragged out from the bottom of the screen. +ActionSheet is implemented based on [Overlay](#overlay){}. **Static Methods:** +- ActionSheet inherits all static methods of **[Overlay](#overlay)**. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | Show the action sheet. | function | yes | iOS/Android | yes | +| show | Show an action sheet, overrides the function of the same name in Overlay{}, input parameter items is the list of action sheet items, cancelItem (nullable) is the cancel action item, options (nullable) is other properties of ActionSheet.ActionSheetView, parameter types see [ActionSheetView](#actionsheetactionsheetview--props).
Returns a unique overlay key value. | function | yes | iOS/Android | yes | **Static Properties:** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| ActionSheetView | Content component for the action sheet. | class | no | iOS/Android | yes | +| ActionSheetView | ActionSheet content display component. | class | no | iOS/Android | yes | + **ActionSheet.ActionSheetView** +- ActionSheet.ActionSheetView component inherits all properties of **[Overlay.PullView](#overlay-pullview)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| items | Array of actions. | array | yes | iOS/Android | yes | -| cancelItem | Cancel button. | object | no | iOS/Android | yes | +| items | List of action sheet items (Array element type is:
type ActionSheetItem {
  title: string,
  onPress: func,
  disabled: bool,
}). | array | yes | iOS/Android | yes | +| cancelItem | Cancel action item (
type ActionSheetItem {
  title: string,
  onPress: func,
  disabled: bool,
}). | object | no | iOS/Android | yes | **ActionSheet.ActionSheetView Static Properties:** @@ -718,38 +801,46 @@ ActionSheet shows a bottom action sheet. **ActionSheet.ActionSheetView.Item** +- ActionSheet.ActionSheetView.Item component inherits all properties of **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | type | Item type. | string | no | iOS/Android | yes | | title | Title text. | string/number/element | yes | iOS/Android | yes | -| topSeparator | Top separator (none, full, indent). | string/element | no | iOS/Android | yes | -| bottomSeparator | Bottom separator (none, full, indent). | string/element | no | iOS/Android | yes | -| disabled | Disable the item. | bool | no | iOS/Android | yes | +| topSeparator | Top separator (none, full, indent) (Indent separator only indents on the left). | string/element | no | iOS/Android | yes | +| bottomSeparator | Bottom separator (none, full, indent) (Indent separator only indents on the left). | string/element | no | iOS/Android | yes | +| disabled | Disable the item (Inherited from TouchableOpacity, when true, the component is displayed as semi-transparent and not touchable). | bool | no | iOS/Android | yes | ### 24. ActionPopover -ActionPopover displays an action menu in a bubble. +ActionPopover is a static class for action popovers, generally used to trigger a multi-item sub-operation for user selection, presented as a bubble popped up from the trigger source component. +ActionPopover is implemented based on [Overlay](#overlay){}. **Static Methods:** +- ActionPopover inherits all static methods of **[Overlay](#overlay)**. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | Show the action popover. | function | yes | iOS/Android | yes | +| show | Show an action popover, overrides the function of the same name in Overlay{}, input parameter fromBounds is the popup bubble source component bounds, items is the list of action items, options (nullable) is other properties of ActionPopover.ActionPopoverView, parameter types see [ActionPopoverView](#actionpopoveractionpopoverview--props).
Returns a unique overlay key value. | function | yes | iOS/Android | yes | **Static Properties:** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| ActionPopoverView | Content component for the action popover. | class | yes | iOS/Android | yes | +| ActionPopoverView | ActionPopover content display component. | class | yes | iOS/Android | yes | + **ActionPopover.ActionPopoverView** +- ActionPopover.ActionPopoverView component inherits all properties of **[Overlay.PopoverView](#overlay-popoverview)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| items | Array of action items. | array | yes | iOS/Android | yes | -| direction | Bubble direction (up, down, left, right). | string | no | iOS/Android | yes | -| align | Alignment (start, center, end). | string | no | iOS/Android | yes | -| showArrow | Show arrow. | bool | no | iOS/Android | yes | +| items | List of action items (Array element type is:
type ActionPopoverItem {
  title: string,
  onPress: func,
}). | array | yes | iOS/Android | yes | +| direction | Bubble direction (up, down, left, right) (Inherited from Overlay.PopoverView and modified default value). | string | no | iOS/Android | yes | +| align | Alignment (start, center, end) (Inherited from Overlay.PopoverView and modified default value). | string | no | iOS/Android | yes | +| showArrow | Show arrow (Inherited from Overlay.PopoverView and modified default value). | bool | no | iOS/Android | yes | **ActionPopover.ActionPopoverView Static Properties** @@ -759,6 +850,8 @@ ActionPopover displays an action menu in a bubble. **ActionPopover.ActionPopoverView.Item Properties:** +- ActionPopover.ActionPopoverView.Item component inherits all properties of **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | Item title. | string/number/element | yes | iOS/Android | yes | @@ -767,29 +860,35 @@ ActionPopover displays an action menu in a bubble. ### 25. PullPicker -PullPicker shows a bottom pull-up selector. +PullPicker is a static class for pull-up selectors, generally used to trigger the display of a data list for user selection, presented as a drawer dragged out from the bottom of the screen. +PullPicker is implemented based on [Overlay](#overlay){}. **Static Methods:** +- PullPicker inherits all static methods of **[Overlay](#overlay)**. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | Show the picker. | function | yes | iOS/Android | yes | +| show | Show a pull-up selector, overrides the function of the same name in Overlay{}, input parameter title is the list title, items is the list of selectable items, selectedIndex is the selected item index, onSelected is the callback function when an item is selected, options (nullable) is other properties of PullPicker.PullPickerView, parameter types see [PullPickerView](#pullpickerpullpickerview--props).
Returns a unique overlay key value. | function | yes | iOS/Android | yes | **Static Properties:** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| PullPickerView | Content component for the pull picker. | class | yes | iOS/Android | yes | +| PullPickerView | PullPicker content display component. | class | yes | iOS/Android | yes | + **PullPicker.PullPickerView** +- PullPicker.PullPickerView component inherits all properties and events of **[Overlay.PullView](#overlay-pullview)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | List title. | string | no | iOS/Android | yes | -| items | Available items. | array | yes | iOS/Android | yes | -| selectedIndex | Selected index. | number | no | iOS/Android | yes | -| getItemText | Source of item text. | function | no | iOS/Android | yes | -| onSelected | Callback when an item is selected. | function | no | iOS/Android | yes | +| items | Available items list. | array | yes | iOS/Android | yes | +| selectedIndex | Current selected item index. | number | no | iOS/Android | yes | +| getItemText | Get the display text of items array element, passed parameters are (item, index), item = items[index], default uses item directly. | function | no | iOS/Android | yes | +| onSelected | Called when an item in the items array is selected, item = items[index]. | function | no | iOS/Android | yes | **PullPicker.PullPickerView Static Properties:** @@ -799,38 +898,46 @@ PullPicker shows a bottom pull-up selector. **PullPicker.PullPickerView.Item Properties** +- PullPicker.PullPickerView.Item component inherits all properties of **[ListRow](#listrow)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | selected | Selected state. | bool | no | iOS/Android | yes | ### 26. PopoverPicker -PopoverPicker displays a bubble selector. +PopoverPicker is a static class for bubble selectors, generally used to trigger the display of a data list for user selection, presented as a bubble popped up from the trigger source component. +PopoverPicker is implemented based on [Overlay](#overlay){}. **Static Methods:** +- PopoverPicker inherits all static methods of **[Overlay](#overlay)**. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | Show the picker. | function | yes | iOS/Android | yes | +| show | Show a bubble selector, overrides the function of the same name in Overlay{}, input parameter fromBounds is the popup bubble source component bounds, items is the list of selectable items, selectedIndex is the selected item index, onSelected is the callback function when an item is selected, options (nullable) is other properties of PopoverPicker.PopoverPickerView, parameter types see [PopoverPickerView](#popoverpickerpopoverpickerview--props).
Returns a unique overlay key value. | function | yes | iOS/Android | yes | **Static Properties:** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| PopoverPickerView | Content component for the popover picker. | class | yes | iOS/Android | yes | +| PopoverPickerView | PopoverPicker content display component. | class | yes | iOS/Android | yes | + **PopoverPicker.PopoverPickerView Properties** +- PopoverPicker.PopoverPickerView component inherits all properties and events of **[Overlay.PopoverView](#overlay-popoverview)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | items | Options array. | array | yes | iOS/Android | yes | -| selectedIndex | Selected index. | number | no | iOS/Android | yes | -| getItemText | Source of item text. | function | no | iOS/Android | yes | +| selectedIndex | Current selected item index. | number | no | iOS/Android | yes | +| getItemText | Get the display text of items array element, passed parameters are (item, index), item = items[index], default uses item directly. | function | no | iOS/Android | yes | | shadow | Show shadow. | bool | no | iOS | yes | -| direction | Arrow direction (up, down, left, right). | string | no | iOS/Android | yes | -| align | Alignment (start, center, end). | string | no | iOS/Android | yes | -| showArrow | Show arrow. | bool | no | iOS/Android | yes | -| onSelected | Selection handler. | function | no | iOS/Android | yes | +| direction | Arrow direction (up, down, left, right) (Inherited from Overlay.PopoverView and modified default value). | string | no | iOS/Android | yes | +| align | Alignment (start, center, end) (Inherited from Overlay.PopoverView and modified default value). | string | no | iOS/Android | yes | +| showArrow | Show arrow (Inherited from Overlay.PopoverView and modified default value). | bool | no | iOS/Android | yes | +| onSelected | Called when an item in the items array is selected, item = items[index]. | function | no | iOS/Android | yes | **PopoverPicker.PopoverPickerView Static Properties** @@ -840,6 +947,8 @@ PopoverPicker displays a bubble selector. **PopoverPicker.PopoverPickerView.Item Properties** +- PopoverPicker.PopoverPickerView.Item component inherits all properties of **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | Title content. | string/number/element | no | iOS/Android | yes | @@ -847,29 +956,35 @@ PopoverPicker displays a bubble selector. ### 27. Menu -Menu displays a popup menu. +Menu is a static class for menus, used to trigger the display of a popup menu for user selection, presented as a bubble popped up from the trigger source component. +Menu is implemented based on [Overlay](#overlay){}. **Static Methods:** +- Menu inherits all static methods of **[Overlay](#overlay)**. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | Show the menu. | function | yes | iOS/Android | yes | +| show | Show a popup menu, overrides the function of the same name in Overlay{}, input parameter fromBounds is the popup menu source component bounds, items is the list of menu items, options (nullable) is other properties of Menu.MenuView, parameter types see [MenuView](#menumenuview--props).
Returns a unique overlay key value. | function | yes | iOS/Android | yes | **Static Properties:** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| MenuView | Content component for the menu. | class | no | iOS/Android | yes | +| MenuView | Menu content display component. | class | no | iOS/Android | yes | + **Menu.MenuView Properties:** +- Menu.MenuView component inherits all properties of **[Overlay.PopoverView](#overlay-popoverview)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| items | Menu items. | array | no | iOS/Android | yes | +| items | Menu items list (Array element type is:
type MenuViewItem {
  title: string,
  icon: any,
  onPress: func,
}
icon detailed type see [Menu.MenuView.Item](#menumenuviewitem--props)). | array | no | iOS/Android | yes | | shadow | Show shadow. | bool | no | iOS | yes | -| direction | Arrow direction (up, down, left, right). | string | no | iOS/Android | yes | -| align | Alignment (start, center, end). | string | no | iOS/Android | yes | -| showArrow | Show arrow. | bool | no | iOS/Android | yes | +| direction | Arrow direction (up, down, left, right) (Inherited from Overlay.PopoverView and modified default value). | string | no | iOS/Android | yes | +| align | Alignment (start, center, end) (Inherited from Overlay.PopoverView and modified default value). | string | no | iOS/Android | yes | +| showArrow | Show arrow (Inherited from Overlay.PopoverView and modified default value). | bool | no | iOS/Android | yes | **Menu.MenuView Static Properties:** @@ -877,42 +992,52 @@ Menu displays a popup menu. | ---- | ----------- | ---- | -------- | -------- | ------------------ | | Item | Menu item component. | class | no | iOS/Android | yes | + **Menu.MenuView.Item Properties:** +- Menu.MenuView.Item component inherits all properties of **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | Item title. | string/number/element | no | iOS/Android | yes | -| icon | Icon content. | element/ImageSource | no | iOS/Android | yes | +| icon | Icon (
**none**: No icon
**empty**: Empty icon, displayed as blank and occupies the space of icon display size). | element/ImageSource | no | iOS/Android | yes | ### 28. Drawer -Drawer provides a side drawer. +Drawer is a static class for drawers, the internal view is a simple encapsulation of [Overlay.PullView](#overlay-pullview) for ease of use. +Drawer is implemented based on [Overlay](#overlay){}. **Static Methods:** +- Drawer inherits all static methods of **[Overlay](#overlay)**. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| open | Open the drawer. | function | yes | iOS/Android | yes | +| open | Open a drawer. Parameter description:
**view**: Drawer internal view content
**side**: Drawer pull-out side, default is 'left'
**rootTransform**: Root component transform animation, default is 'none'
**options**: Other properties of Drawer.DrawerView, parameter types see [DrawerView](#drawerdrawerview--props)
Return value is an object, object property description:
**key**: Overlay unique key value
**close**: Close drawer function, calling this function will close the drawer. | function | yes | iOS/Android | yes | **Static Properties:** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| DrawerView | Content component for the drawer. | class | no | iOS/Android | yes | +| DrawerView | Drawer content display component. | class | no | iOS/Android | yes | + **Drawer.DrawerView Properties** -DrawerView inherits all properties and events from Overlay.PullView. +- Drawer.DrawerView component inherits all properties and events of **[Overlay.PullView](#overlay-pullview)** component. ### 29. ModalIndicator -ModalIndicator displays a modal loading indicator. +ModalIndicator is a static class for modal indicators, generally used when user operations need to be blocked, such as submitting data, presented as a modal indicator covering the full screen. +ModalIndicator is implemented based on **[Overlay](#overlay)**. **Static Methods:** +- ModalIndicator inherits all static methods of **[Overlay](#overlay)**. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | Show the indicator. | function | yes | iOS/Android | yes | +| show | Pop up modal indicator, overrides the function of the same name in Overlay{}, input parameter text is the text displayed under the modal indicator. If the modal indicator is already displayed before calling this function, only the text is replaced. | function | yes | iOS/Android | yes | | hide | Hide the indicator. | function | yes | iOS/Android | yes | **Static Properties:** @@ -923,12 +1048,14 @@ ModalIndicator displays a modal loading indicator. **ModalIndicator.IndicatorView Parameters:** +- ModalIndicator.IndicatorView component inherits all properties of **[View](https://facebook.github.io/react-native/docs/view.html)** component. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | text | Message text. | string/number/element | no | iOS/Android | yes | -| position | Display position. | string | no | iOS/Android | yes | +| position | Display position.
**top**: Top of the window
**bottom**: Bottom of the window
**center**: Center of the window
top, bottom positions can be set in Theme. | string | no | iOS/Android | yes | | size | Indicator size. | string | no | iOS/Android | yes | -| color | Indicator color. | string | no | iOS/Android | yes | +| color | Indicator color (Default value is set in Theme). | string | no | iOS/Android | yes | ### 30. TeaNavigator @@ -948,12 +1075,14 @@ TeaNavigator is the root navigator component. ### 31. BasePage -BasePage is the base page component. +BasePage defines a base page component, which is an abstract encapsulation of Page, needs to derive new classes to use, providing a series of easy-to-use overridable methods. + +- BasePage component inherits all properties of **[View](https://facebook.github.io/react-native/docs/view.html)** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | scene | Transition effects. | object | no | iOS/Android | yes | -| autoKeyboardInsets | Auto-adjust for keyboard. | bool | no | iOS/Android | yes | +| autoKeyboardInsets | Whether to automatically insert keyboard occupation space when the keyboard pops up, the purpose of inserting keyboard occupation space is to avoid page content being covered by the keyboard. | bool | no | iOS/Android | yes | | keyboardTopInsets | Keyboard top inset. | number | no | iOS/Android | yes | For the **autoKeyboardInsets** property, **the soft keyboard on HarmonyOS automatically avoids input fields by default**. If you want to disable the system’s default soft keyboard avoidance behavior, refer to [Soft Keyboard Layout Adaptation](https://developer.huawei.com/consumer/en/doc/best-practices/bpta-keyboard-layout-adapt#section15829951124116) or follow the steps below: @@ -975,7 +1104,7 @@ For the **autoKeyboardInsets** property, **the soft keyboard on HarmonyOS automa | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| navigator | Navigator object. | object | yes | iOS/Android | yes | +| navigator | Navigator object (Read-only property variable). | object | yes | iOS/Android | yes | | didMount | Whether the page mounted. | bool | yes | iOS/Android | yes | | isFocused | Whether the page is focused. | bool | yes | iOS/Android | yes | @@ -983,30 +1112,34 @@ For the **autoKeyboardInsets** property, **the soft keyboard on HarmonyOS automa | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| onWillFocus | Triggered before the page gains focus. | function | no | iOS/Android | yes | -| onDidFocus | Triggered after the page gains focus. | function | no | iOS/Android | yes | -| onHardwareBackPress | Hardware back button handler. | function | no | Android/Harmony | yes | -| renderPage | Render function for the page. | function | yes | iOS/Android | yes | +| onWillFocus | Will focus on this page, called before page transition animation starts.
Override this function in derived class to perform required operations. | function | no | iOS/Android | yes | +| onDidFocus | Has focused on this page, called after page transition animation ends.
Override this function in derived class to perform required operations.
If there are time-consuming operations in page initialization, it is easy to cause page transition animation lag during initialization, it is recommended to put complex initialization code in this function. | function | no | iOS/Android | yes | +| onHardwareBackPress | Called when the user presses the back button (physical key, Android only). | function | no | Android | no | +| renderPage | Page render function, all derived classes of BasePage should override this function to render the interface, instead of render function. | function | yes | iOS/Android | yes | ### 32. NavigationPage -NavigationPage extends BasePage and includes a navigation bar. +NavigationPage defines a navigation page component, inheriting from BasePage, adding a NavigationBar navigation bar on the basis of BasePage. + +- NavigationPage component inherits all properties of **BasePage** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | Navigation bar title. | string | no | iOS/Android | yes | | showBackButton | Show the back button. | bool | no | iOS/Android | yes | -| navigationBarInsets | Reserve space for the navigation bar. | bool | no | iOS/Android | yes | -| scene | Transition effects. | object | no | iOS/Android | yes | +| navigationBarInsets | Whether to add navigation bar occupation space for content area. (This property defaults to true, so that the content is not covered by the navigation bar. If the page content uses ScrollView and you need to control the display/hide of the NavigationBar yourself, you need to set this property to false and add the navigation bar occupation space in the ScrollView container yourself, so that the top space can be utilized after the navigation bar is hidden). | bool | no | iOS/Android | yes | +| scene | Transition effects (Inherited from BasePage and modified default value). | object | no | iOS/Android | yes | + +**Methods:** -**Overridable Methods:** +- NavigationPage component inherits all methods of **BasePage** component. | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| renderNavigationTitle | Render the navigation bar title. | function | no | iOS/Android | yes | -| renderNavigationLeftView | Render the left view of the navigation bar. | function | no | iOS/Android | yes | -| renderNavigationRightView | Render the right view of the navigation bar. | function | no | iOS/Android | yes | -| renderNavigationBar | Render the navigation bar. | function | no | iOS/Android | yes | +| renderNavigationTitle | Navigation bar title render function. | function | no | iOS/Android | yes | +| renderNavigationLeftView | Navigation bar left button render function, default returns NavigationBar.BackButton component instance based on this.props.showBackButton value, otherwise returns null.
Note: You can modify the default title of the back button through Theme. | function | no | iOS/Android | yes | +| renderNavigationRightView | Navigation bar right button render function. | function | no | iOS/Android | yes | +| renderNavigationBar | Navigation bar render function (Generally should override the above three functions instead of this function). | function | no | iOS/Android | yes | ## Known Issues diff --git a/zh-cn/teaset.md b/zh-cn/teaset.md index 66bee5b1b30465f76c30a8b641c79dbba5ba901b..09ba9ff64aa83f1dd5472cb73ed047a5c9e9ce24 100644 --- a/zh-cn/teaset.md +++ b/zh-cn/teaset.md @@ -103,14 +103,14 @@ import Label from 'teaset/components/Label/Label'; ### 1. Theme - 主题 -Theme 为全局主题配置，用于统一应用的视觉风格。 +Theme 是 Teaset 的组件样式定义对象, 用于定义 Teaset 组件的默认样式。 **静态方法：** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | set | 设置主题配色方案，支持完整主题对象或部分属性修改 | function | yes | iOS/Android | yes | -| themes | 获取所有内置主题配色方案（default、black、violet） | object | yes | iOS/Android | yes | +| themes | 获取所有内置主题配色方案 (default、black、violet) | object | yes | iOS/Android | yes | **主题属性：** @@ -122,152 +122,172 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 ### 2. Label - 标签 -用于显示文本的组件，支持多种预设样式。 +Label 组件用于文本显示, 一般为单行的少量文字。 + +- Label 组件继承 **[Text](https://reactnative.dev/docs/text.html)** 组件的全部属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | type | 标签类型 (default, title, detail, danger) | string | no | iOS/Android | yes | -| size | 字号大小 (xl, lg, md, sm, xs) | string | no | iOS/Android | yes | +| size | 显示尺寸大小 (xl, lg, md, sm, xs) | string | no | iOS/Android | yes | | text | 文本内容 | string/number | no | iOS/Android | yes | -| numberOfLines | 显示行数 | number | no | iOS/Android | yes | +| numberOfLines | 显示行数 (继承自 Text 组件并修改默认值)| number | no | iOS/Android | yes | ### 3. Button - 按钮 -各种样式的按钮组件。 +Button 组件定义一个按钮, 可视、可触摸且有触摸反馈。 + +- Button 组件继承 **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | type | 按钮类型 (default, primary, secondary, danger, link) | string | no | iOS/Android | yes | -| size | 按钮大小 (xl, lg, md, sm, xs) | string | no | iOS/Android | yes | +| size | 显示尺寸大小 (xl, lg, md, sm, xs) | string | no | iOS/Android | yes | | title | 按钮标题 | string/number/element | no | iOS/Android | yes | -| titleStyle | 标题样式 | style | no | iOS/Android | yes | -| disabled | 是否禁用 | bool | no | iOS/Android | yes | +| titleStyle | 标题样式 (当 title 类型为 element 时无效) | style | no | iOS/Android | yes | +| disabled | 是否禁用 (为 true 时组件显示为半透明且不可触摸。) | bool | no | iOS/Android | yes | | onPress | 点击事件 | function | no | iOS/Android | yes | ### 4. Checkbox - 复选框 -支持单选和多选的复选框组件。 +Checkbox 组件定义一个复选框, 具有选中、非选中两种状态。 + +- Checkbox 组件继承 **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | checked | 是否选中 | bool | no | iOS/Android | yes | | defaultChecked | 默认是否选中 | bool | no | iOS/Android | yes | -| size | 图标大小 (lg, md, sm) | string | no | iOS/Android | yes | +| size | 显示尺寸大小 (lg, md, sm) | string | no | iOS/Android | yes | | title | 标题 | string/number/element | no | iOS/Android | yes | -| titleStyle | 标题样式 | style | no | iOS/Android | yes | +| titleStyle | 标题样式 (当 title 类型为 element 时无效) | style | no | iOS/Android | yes | | checkedIcon | 选中图标 | element | no | iOS/Android | yes | | checkedIconStyle | 选中图标样式 | ImageStyle | no | iOS/Android | yes | | uncheckedIcon | 未选中图标 | element | no | iOS/Android | yes | | uncheckedIconStyle | 未选中图标样式 | ImageStyle | no | iOS/Android | yes | -| disabled | 是否禁用 | bool | no | iOS/Android | yes | -| hitSlop | 触摸区域扩展 | object | no | iOS/Android | yes | +| disabled | 是否禁用 (继承自 TouchableOpacity, 为 true 时组件显示为半透明且不可触摸) | bool | no | iOS/Android | yes | +| hitSlop | 触摸区域扩展 (继承自 TouchableOpacity 并修改默认值) | object | no | iOS/Android | yes | | onChange | 状态改变事件 | function | no | iOS/Android | yes | ### 5. Input - 输入框 -单行或多行文本输入组件。 +Input 组件定义一个输入编辑框。 + +- Input 组件继承 **[TextInput](https://reactnative.dev/docs/textinput.html)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| size | 输入框大小 (lg, md, sm) | string | no | iOS/Android | yes | -| disabled | 是否禁用 | bool | no | iOS/Android | yes | -| underlineColorAndroid | Android 下划线颜色 | string/'rgba(0, 0, 0, 0)' | no | Android |yes | +| size | 显示尺寸大小 (lg, md, sm) | string | no | iOS/Android | yes | +| disabled | 是否禁用 (为 true 时组件显示为半透明且不可聚焦) | bool | no | iOS/Android | yes | +| underlineColorAndroid | Android 下划线颜色 (继承自 TextInput 并修改默认值) | string/'rgba(0, 0, 0, 0)' | no | Android |yes | | onChangeText | 文本改变事件 | function | no | iOS/Android | yes | ### 6. Select - 选择框 -类似 HTML Select 的下拉选择组件。 +Select 组件定义一个选择框。 + +- Select 组件继承 **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** 组件的全部属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| size | 选择框大小 (lg, md, sm) | string | no | iOS/Android | yes | +| size | 显示尺寸大小 (lg, md, sm) | string | no | iOS/Android | yes | | value | 选中值 | any | no | iOS/Android | yes | | valueStyle | 选中值文本样式 | style | no | iOS/Android | yes | | items | 下拉列表项数组 | array | no | iOS/Android | yes | -| getItemValue | 获取列表项值函数 | function | no | iOS/Android | yes | -| getItemText | 获取列表项显示文本函数 | function | no | iOS/Android | yes | +| getItemValue | 获取列表项值函数 (取 items 数组元素的 value 值, 传入参数为(item, index), item = items[index], 默认直接使用 item) | function | no | iOS/Android | yes | +| getItemText | 获取列表项显示文本函数 (取 items 数组元素的显示文本或 React Native 组件, 传入参数为(item, index), item = items[index], 默认直接使用 item) | function | no | iOS/Android | yes | | pickerType | 选择器类型 (auto, pull, popover) | string | no | iOS/Android | yes | -| pickerTitle | 选择器标题 | string | no | iOS/Android | yes | +| pickerTitle | PullPicker 选择器标题 | string | no | iOS/Android | yes | | editable | 是否可编辑 | bool | no | iOS/Android | yes | -| icon | 右侧图标 | element | no | iOS/Android | yes | +| icon | 右侧指示图标 (none:无图标、default:默认图标) | string/ImageSource/element | no | iOS/Android | yes | | iconTintColor | 图标颜色 | string | no | iOS/Android | yes | | placeholder | 占位文本 | string | no | iOS/Android | yes | -| placeholderTextColor | 占位文本颜色 | string | no | iOS/Android | yes | +| placeholderTextColor | 占位文本颜色 (value 为空时显示此字符串) | string | no | iOS/Android | yes | | disabled | 是否禁用 | bool | no | iOS/Android | yes | -| onSelected | 选中事件 | function | no | iOS/Android | yes | +| onSelected | 选中事件 (当选择器选择 items 数组某项时调用, item = items[index]) | function | no | iOS/Android | yes | ### 7. Stepper - 步进器 -数字增减控制组件。 +Stepper 组件定义一个步进器。 + +- Stepper 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| defaultValue | 默认值 | number | no | iOS/Android | yes | +| defaultValue | 默认值 (仅在组件初始化时使用一次, 如不想传入 value 并监听 onChange 保持状态同步, 可使用 defaultValue 代替) | number | no | iOS/Android | yes | | value | 当前值 | number | no | iOS/Android | yes | -| step | 步进值 | number | no | iOS/Android | yes | -| max | 最大值 | number | no | iOS/Android | yes | -| min | 最小值 | number | no | iOS/Android | yes | -| valueStyle | 值文本样式 | style | no | iOS/Android | yes | -| valueFormat | 值格式化函数 | function | no | iOS/Android | yes | -| subButton | 减少按钮 | element | no | iOS/Android | yes | -| addButton | 增加按钮 | element | no | iOS/Android | yes | -| showSeparator | 是否显示分隔线 | bool | no | iOS/Android | yes | -| disabled | 是否禁用 | bool | no | iOS/Android | yes | +| step | 步进值 (整数或小数) | number | no | iOS/Android | yes | +| max | 最大值 (默认不限制) | number | no | iOS/Android | yes | +| min | 最小值 (默认不限制) | number | no | iOS/Android | yes | +| valueStyle | 值显示样式 | style | no | iOS/Android | yes | +| valueFormat | 值格式化函数 (传入参数为 value, 默认直接使用 value) | function | no | iOS/Android | yes | +| subButton | “减“按钮 | string/element | no | iOS/Android | yes | +| addButton | “加“按钮 | string/element | no | iOS/Android | yes | +| showSeparator | 是否显示分隔线 (如需完全自定义组件样式可设置为 false) | bool | no | iOS/Android | yes | +| disabled | 是否禁用 (为 true 时组件显示为半透明且不可触摸) | bool | no | iOS/Android | yes | | editable | 是否可编辑 | bool | no | iOS/Android | yes | -| onChange | 值改变事件 | function | no | iOS/Android | yes | +| onChange | 值改变事件 (当 value 值发生改变时调用) | function | no | iOS/Android | yes | ### 8. SearchInput - 搜索输入框 -带搜索图标的输入框组件。 +SearchInput 组件定义一个搜索输入框, 与 Input 的区别是有多一个放大镜图标, 在内容为空时且不在编辑状态时居中显示, 否则左对齐。 + +- SearchInput 组件继承 **[TextInput](https://reactnative.dev/docs/textinput.html)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| style | 组件样式 | ViewStyle | no | iOS/Android | yes | +| style | 组件样式 (组件的容器 View 的样式) | ViewStyle | no | iOS/Android | yes | | inputStyle | 输入框样式 | style | no | iOS/Android | yes | -| iconSize | 图标大小 | number | no | iOS/Android | yes | -| disabled | 是否禁用 | bool | no | iOS/Android | yes | -| underlineColorAndroid | Android 下划线颜色 | string/'rgba(0, 0, 0, 0)' | no | Android | yes | +| iconSize | 放大镜图标长宽尺寸 (默认值在 Theme 中设置) | number | no | iOS/Android | yes | +| disabled | 是否禁用 (为 true 时组件显示为半透明且不可触摸) | bool | no | iOS/Android | yes | +| underlineColorAndroid | Android 下划线颜色 (继承自 TextInput 并修改默认值) | string/'rgba(0, 0, 0, 0)' | no | Android | yes | | onChangeText| 文本改变事件 | function | no | iOS/Android | yes | ### 9. Badge - 徽章 -用于显示通知数量或状态的小标记。 +Badge 组件定义一个徽章, 可用于图标角标显示数字、字母、原点等, 也可以自定义显示其它内容。 + +- Badge 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | type | 徽章类型 (capsule, square, dot) | string | no | iOS/Android | yes | -| count | 显示数字 | number | no | iOS/Android | yes | -| countStyle | 数字文本样式 | style | no | iOS/Android | yes | -| maxCount | 最大显示数字，超过显示+号 | number | no | iOS/Android | yes | +| count | 徽章显示数字 | string/number | no | iOS/Android | yes | +| countStyle |徽章显示数字样式 | style | no | iOS/Android | yes | +| maxCount | 最大显示数字 (当 count 大于此值时显示为 maxCount 后接一个加号, 如'99+', 当 count 不是数字时无效) | number | no | iOS/Android | yes | ### 10. Popover - 气泡 -气泡弹出框组件 +Popover 组件定义一个气泡, 是一个可在边框任意位置显示一个三角形箭头的圆角矩形容器, 常用于聊天信息显示或弹出提示等。 + +- Popover 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | arrow | 三角形箭头的位置 ( none, topLeft, top, topRight, rightTop, right, rightBottom, bottomRight, bottom, bottomLeft, leftBottom, left, leftTop)| string | no | iOS/Android | yes | -| paddingCorner | 箭头与角点距离 | number | no | iOS/Android | yes | +| paddingCorner | 三角形箭头与角点距离 ( 与 arrow 值有关, 如 arrow = 'topLeft' 时表示三角形箭头与左上角的距离, 默认值在 Theme 中设置) | number | no | iOS/Android | yes | ### 11. NavigationBar - 导航栏 -页面顶部导航栏组件。 +NavigationBar 组件定义一个页面导航条, 用于页面顶部显示页面标题及按钮等。 + +- NavigationBar 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| type | 导航栏类型 (auto, ios, android, harmony) | string | no | iOS/Android | yes | -| title | 标题 | string/element | no | iOS/Android | yes | -| titleStyle | 标题样式 | style | no | iOS/Android | yes | -| leftView | 左侧视图 | element | no | iOS/Android | yes | -| rightView | 右侧视图 | element | no | iOS/Android | yes | -| tintColor | 染色（左右按钮颜色） | string | no | iOS/Android | yes | -| background | 背景视图 | element | no | iOS/Android | yes | -| hidden | 是否隐藏 | bool | no | iOS/Android | yes | -| animated | 隐藏/显示动画 | bool | no | iOS/Android | yes | -| statusBarStyle | 状态栏样式 (default, light-content, dark-content) | string | no | iOS/Android | yes | -| statusBarColor | 状态栏颜色 | string | no | iOS/Android | yes | -| statusBarHidden | 状态栏隐藏 | bool | no | iOS/Android | yes | -| statusBarInsets | 状态栏占位 | bool | no | iOS | yes | +| type | 风格类型 (auto, ios, android, harmony) | string | no | iOS/Android | yes | +| title | 导航条标题 (传入字符串时使用组件渲染) | string/element | no | iOS/Android | yes | +| titleStyle | 导航条标题样式 (当 title 类型为 element 时无效) | style | no | iOS/Android | yes | +| leftView | 导航条左视图 | element | no | iOS/Android | yes | +| rightView | 导航条右视图 | element | no | iOS/Android | yes | +| tintColor | 导航条左、右视图文字与图像颜色 (默认值在 Theme 中设置) | string | no | iOS/Android | yes | +| background | 导航条背景视图 | element | no | iOS/Android | yes | +| hidden | 是否隐藏导航条 | bool | no | iOS/Android | yes | +| animated | 显示/隐藏导航条和状态栏时是否有动画效果 | bool | no | iOS/Android | yes | +| statusBarStyle | 系统状态栏样式 (default, light-content, dark-content) | string | no | iOS/Android | yes | +| statusBarColor | 导航条背景颜色 (默认值在 Theme 中设置) | string | no | iOS/Android | yes | +| statusBarHidden | 是否隐藏系统状态栏 | bool | no | iOS/Android | yes | +| statusBarInsets | 是否自动增加状态栏占位空间 | bool | no | iOS | yes | **静态属性：** @@ -275,17 +295,19 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 | ---- | ----------- | ---- | -------- | -------- | ------------------ | | Title | 导航条标题组件 | class | no | iOS/Android | yes | | Button | 导航条按钮组件 | class | no | iOS/Android | yes | -| LinkButton| 导航条链接按钮组件 | class | no | iOS/Android | yes | -| IconButton | 导航条图标按钮组件 | class | no | iOS/Android | yes | -| BackButton | 导航条返回按钮组件 | class | no | iOS/Android | yes | +| LinkButton| 导航条链接按钮组件, 继承自 NavigationBar.Button | class | no | iOS/Android | yes | +| IconButton | 导航条图标按钮组件, 继承自 NavigationBar.Button | class | no | iOS/Android | yes | +| BackButton | 导航条返回按钮组件, 继承自 NavigationBar.Button | class | no | iOS/Android | yes | **NavigationBar.Title** +- NavigationBar.Title 组件继承 **[Text](https://reactnative.dev/docs/text.html)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | text | 显示文本 | string/number | no | iOS/Android | yes | -| numberOfLines | 显示行数 | number | no | iOS/Android | yes | -| allowFontScaling| 是否允许系统自动缩放字体大小 | bool | no | iOS | yes | +| numberOfLines | 显示行数 (继承自 Text 组件并修改默认值) | number | no | iOS/Android | yes | +| allowFontScaling| 是否允许系统自动缩放字体大小 (继承自 Text 组件并修改默认值。) | bool | no | iOS | yes | **allowFontScaling** 属性依赖应用配置，具体配置方案参考[如何设置应用内字体是否跟随系统变化](https://developer.huawei.com/consumer/cn/doc/architecture-guides/common-v1_26-ts_20-0000002298448781) 或者以下步骤： @@ -318,48 +340,60 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 **NavigationBar.Button** +- NavigationBar.Button 组件继承 **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| hitSlop | 触摸区域扩展 | class | no | iOS/Android | yes | +| hitSlop | 触摸区域扩展 (继承 TouchableOpacity 组件并修改默认值) | class | no | iOS/Android | yes | **NavigationBar.LinkButton** +- NavigationBar.LinkButton 组件继承 **[NavigationBar.Button](#navigationbar-button-props)** 组件的全部属性。 + + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | 按钮标题 | string/number | no | iOS/Android | yes | **NavigationBar.IconButton** +- NavigationBar.IconButton 组件继承 **[NavigationBar.Button](#navigationbar-button-props)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | icon | 按钮图标 | ImageSource | no | iOS/Android | yes | **NavigationBar.BackButton** +- NavigationBar.BackButton 组件继承 **[NavigationBar.Button](#navigationbar-button-props)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| title | 标题 | string\number | no | iOS/Android | yes | +| title | 标题 (默认值在 Theme 中设置) | string\number | no | iOS/Android | yes | | icon | 按钮图标 | ImageSource | no | iOS/Android | yes | + ### 12. ListRow - 列表行 -列表行组件，常用于设置页面。 +ListRow 组件用于显示一个列表行, 定义了一系列易于使用的元素属性, 使得可以快速开发出基于 ListView、ScrollView 的应用。 + +- ListRow 组件继承 **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | 标题 | string/number/element | no | iOS/Android | yes | -| detail | 详情 | string/number/element | no | iOS/Android | yes | -| titleStyle | 标题样式 | style | no | iOS/Android | yes | -| detailStyle | 详情样式 | style | no | iOS/Android | yes | -| detailMultiLine | 详情多行显示 | bool | no | iOS/Android | yes | +| detail | 详细内容 | string/number/element | no | iOS/Android | yes | +| titleStyle | 标题样式 (当 title 类型为 element 时无效) | style | no | iOS/Android | yes | +| detailStyle | 详细内容样式 (当 detail 类型为 element 时无效) | style | no | iOS/Android | yes | +| detailMultiLine | 详细内容是否支持多行 (默认为 titlePlace = 'top' 时为 true, 否则为 false) | bool | no | iOS/Android | yes | | icon | 左侧图标 | element/ImageSource | no | iOS/Android | yes | -| accessory | 右侧附件 (none, auto, empty, indicator, check) | string/element | no | iOS/Android | yes | -| topSeparator | 顶部分隔线 (none, full, indent) | string | no | iOS/Android | yes | -| bottomSeparator | 底部分隔线 (none, full, indent) | string | no | iOS/Android | yes | +| accessory | 右侧指示图标 (**none**: 无;
**auto**: 自动, 当设置了 onPress 属性时为'indicator', 否则为'none';
**empty**: 空, 不显示指示图标, 但占用'check'或'indicator'大小的位置;
**check**: 小勾图标, 一般用于表示该行已被选中;
**indicator**: 大于号图标, 一般用于表示点击此行打开新页面;) | string/element/ImageSource | no | iOS/Android | yes | +| topSeparator | 顶部分隔线 (none, full, indent) (缩进分隔线仅左侧缩进) | string/element | no | iOS/Android | yes | +| bottomSeparator | 底部分隔线 (none, full, indent) (缩进分隔线仅左侧缩进)| string/element | no | iOS/Android | yes | | titlePlace | 标题位置 (left, top, none) | string | no | iOS/Android | yes | -| swipeActions | 左右滑动操作按钮数组 | array | no | iOS/Android | yes | +| swipeActions | 向左滑动时显示的操作按钮列表 (建议使用 ListRow.SwipeActionButton 组件) | array | no | iOS/Android | yes | +| activeOpacity | 点击不透明度 (继承自 TouchableOpacity 并修改默认值, 传入 onPress 时默认为 0.2, 否则为 1) | number | no | iOS/Android | yes | | onPress | 点击事件 | function | no | iOS/Android | yes | -| activeOpacity | 点击不透明度 | number | no | iOS/Android | yes | **静态属性：** @@ -369,39 +403,45 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 **ListRow.SwipeActionButton** +- SwipeActionButton 组件继承 **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | type | 显示样式类型(default, danger) | string | no | iOS/Android | yes | | title | 标题 | string/number/element | no | iOS/Android | yes | -| titleStyle | 标题样式 | style | no | iOS/Android | yes | +| titleStyle | 标题样式 (当 title 类型为 element 时无效) | style | no | iOS/Android | yes | ### 13. Carousel - 走马灯 -图片轮播组件。 +Carousel 组件定义一个跑马灯组件, 一般用于图片、信息页面轮播, 也可用于内容分页显示。 + +- Carousel 组件继承 **[ScrollView](https://reactnative.dev/docs/scrollview.html)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| carousel | 是否自动轮播 | bool | no | iOS/Android | yes | -| interval | 自动轮播间隔时间（毫秒） | number | no | iOS/Android | yes | -| direction | 轮播方向 (forward, backward) | string | no | iOS/Android | yes | +| carousel | 是否开启轮播 (为 false 时停止轮播, 可以调用 scrollToPage 或 scrollToNextPage 方法滚动到页面) | bool | no | iOS/Android | yes | +| interval | 每页停留时间(单位为毫秒, carousel = true 时有效) | number | no | iOS/Android | yes | +| direction | 轮播方向 (carousel = true 时有效)
**forward**: 正向轮播，页面从右往左滚动;
**backward**: 反向轮播, 页面从左往右滚动 | string | no | iOS/Android | yes | | startIndex | 起始页面索引 | number | no | iOS/Android | yes | -| cycle | 是否循环播放 | bool | no | iOS/Android | yes | -| control | 页面指示器 | bool/element | no | iOS/Android | yes | -| horizontal | 横向滚动 | bool | no | iOS/Android | yes | -| pagingEnabled | 分页滚动| bool | no | iOS/Android | yes | -| showsHorizontalScrollIndicator | 显示横向滚动条 | bool | no | iOS/Android | yes | -| showsVerticalScrollIndicator | 显示竖向滚动条 | bool | no | iOS/Android | yes | -| alwaysBounceHorizontal | 总是横向弹性滚动 | bool | no | iOS/Android | yes | -| alwaysBounceVertical | 总是纵向弹性滚动 | bool | no | iOS/Android | yes | -| bounces | 弹性滚动 | bool | no | iOS/Android | yes | -| automaticallyAdjustContentInsets | 自动调整内容内边距 | bool | no | iOS/Android | yes | -| scrollEventThrottle | 滚动事件的触发频率| number | no | iOS/Android | yes | +| cycle | 是否循环播放 (carousel = true 时有效) | bool | no | iOS/Android | yes | +| control | 页面指示器 (为 true 时显示默认页面控制器, 也可以传入自定义的页面控制器, 建议使用 Carousel.Control 组件) | bool/element | no | iOS/Android | yes | +| horizontal | 横向滚动 (继承自 ScrollView 并修改默认值) | bool | no | iOS/Android | yes | +| pagingEnabled | 分页滚动 (继承自 ScrollView 并修改默认值)| bool | no | iOS/Android | yes | +| showsHorizontalScrollIndicator | 显示横向滚动条 (继承自 ScrollView 并修改默认值) | bool | no | iOS/Android | yes | +| showsVerticalScrollIndicator | 显示竖向滚动条 (继承自 ScrollView 并修改默认值) | bool | no | iOS/Android | yes | +| alwaysBounceHorizontal | 总是横向弹性滚动 (继承自 ScrollView 并修改默认值) | bool | no | iOS/Android | yes | +| alwaysBounceVertical | 总是纵向弹性滚动 (继承自 ScrollView 并修改默认值) | bool | no | iOS/Android | yes | +| bounces | 弹性滚动 (继承自 ScrollView 并修改默认值) | bool | no | iOS/Android | yes | +| automaticallyAdjustContentInsets | 自动调整内容内边距 (继承自 ScrollView 并修改默认值) | bool | no | iOS/Android | yes | +| scrollEventThrottle | 滚动事件的触发频率 (继承自 ScrollView 并修改默认值)| number | no | iOS/Android | yes | | onChange | 页面改变事件 | function | no | iOS/Android | yes | | scrollToPage | 滚动到指定页面 | function | no | iOS/Android | yes | | scrollToNextPage | 滚动到下一页 | function | no | iOS/Android | yes | **Carousel.Control 组件：** +- Carousel.Control 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | dot | 页面指示点元素 | element | no | iOS/Android | yes | @@ -409,29 +449,33 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 ### 14. Projector - 幻灯机 -多页显示组件，具有视图缓存功能。 +Projector 组件定义一个幻灯机组件, 这是一个自动保持状态的多页显示组件, 并且具有视图缓存功能的, 切换页面就像切换幻灯机胶片一样, 原页面的内容和状态不会消失, 再切换回这个页面时原样呈现而无需重新渲染。 + +- Projector 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| index | 当前显示索引 | number | no | iOS/Android | yes | -| slideStyle | 幻灯片样式 | ViewStyle | no | iOS/Android | yes | +| index | 当前胶片(页面)序号 | number | no | iOS/Android | yes | +| slideStyle | 胶片(页面)样式 | ViewStyle | no | iOS/Android | yes | ### 15. SegmentedBar - 分段工具条 -分段选择条组件。 +SegmentedBar 组件定义一个分段工具条组件, 与 或 搭配使用可实现同一页面中多项内容分段显示。 + +- SegmentedBar 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| justifyItem | Item 排列模式 (fixed, scrollable) | string | no | iOS/Android | yes | -| indicatorType | 指示器类型 (none, boxWidth, itemWidth, customWidth) | string | no | iOS/Android | yes | -| indicatorPosition | 指示器位置 (top, bottom) | string | no | iOS/Android | yes | -| indicatorLineColor | 指示器线条颜色 | string | no | iOS/Android | yes | -| indicatorLineWidth | 指示器线条高度 | number | no | iOS/Android | yes | -| indicatorWidth | 自定义指示器宽度 | number | no | iOS/Android | yes | -| indicatorPositionPadding | 指示器位置内边距 | number | no | iOS/Android | yes | -| animated | 是否启用动画 | bool | no | iOS/Android | yes | -| autoScroll | 自动滚动到中心 | bool | no | iOS/Android | yes | -| activeIndex | 活动索引 | number | no | iOS/Android | yes | +| justifyItem | Item 排列模式。(
**fixed**: 固定位置等宽排列;
**scrollable**: 可滚动，Item 数量较多一屏显示不下时使用这种模式) | string | no | iOS/Android | yes | +| indicatorType | 激活指示器类型。(
**none**: 无
**boxWidth**: 等分区间宽度
**itemWidth**: Item 内容宽度
**customWidth**: 指定宽度) | string | no | iOS/Android | yes | +| indicatorPosition | 激活指示器位置 (top, bottom) | string | no | iOS/Android | yes | +| indicatorLineColor | 指示器线条颜色 (默认值在 Theme 中设置) | string | no | iOS/Android | yes | +| indicatorLineWidth | 指示器线条高度 (默认值在 Theme 中设置) | number | no | iOS/Android | yes | +| indicatorWidth | 激活指示器线宽度 (当 indicatorType 为 customWidth 时起作用) | number | no | iOS/Android | yes | +| indicatorPositionPadding |激活指示器与上边界或下边界的距离 (默认值在 Theme 中设置) | number | no | iOS/Android | yes | +| animated | 改变激活 Item 时是否有动画效果 | bool | no | iOS/Android | yes | +| autoScroll | 是否自动滚动激活 Item 到容器中间 (仅 justifyItem 为 'scrollable' 时有效) | bool | no | iOS/Android | yes | +| activeIndex | 激活 Item 序号 | number | no | iOS/Android | yes | | onChange | 选项改变事件 | function | no | iOS/Android | yes | **静态属性：** @@ -442,32 +486,36 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 **SegmentedBar.Item 属性：** +- SegmentedBar.Item 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | 标题 | string/number/element | no | iOS/Android | yes | -| titleStyle | 标题样式 | style | no | iOS/Android | yes | -| activeTitleStyle | 激活标题样式 | style | no | iOS/Android | yes | -| badge | 徽章 | string/number/element | no | iOS/Android | yes | +| titleStyle | 标题样式 (当 title 类型为 element 时无效) | style | no | iOS/Android | yes | +| activeTitleStyle | 激活状态标题样式 (当 title 类型为 element 时无效) | style | no | iOS/Android | yes | +| badge | 徽章 (为字符串、数字时使用 `` 组件渲染) | string/number/element | no | iOS/Android | yes | | active | 是否激活 | bool | no | iOS/Android | yes | ### 16. SegmentedView - 分段器 -分段视图容器组件。 +SegmentedView 组件定义一个分段器组件, 一般用于同一页面中多项内容分段显示。
SegmentedView 组件为 `` 、 `` / `` 的易用性封装复合组件。 + +- SegmentedView 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| type | 分段器类型 (projector, carousel) | string | no | iOS/Android | yes | -| barPosition | 工具条位置 (top, bottom) | string | no | iOS/Android | yes | -| barStyle | 工具条样式 | style | no | iOS/Android | yes | -| justifyItem | Item 宽度分配 (fixed, scrollable) | string | no | iOS/Android | yes | -| indicatorType | 指示器类型 (none, boxWidth, itemWidth) | string | no | iOS/Android | yes | -| indicatorPosition | 指示器位置 (top, bottom) | string | no | iOS/Android | yes | -| indicatorLineColor | 指示器线条颜色 | string | no | iOS/Android | yes | -| indicatorLineWidth | 指示器线条高度 | number | no | iOS/Android | yes | -| indicatorPositionPadding | 指示器位置内边距 | number | no | iOS/Android | yes | -| animated | 是否启用动画 | bool | no | iOS/Android | yes | -| autoScroll | 自动滚动 | bool | no | iOS/Android | yes | -| activeIndex | 活动索引 | number | no | iOS/Android | yes | +| type | 分段器类型。(
**projector**: 幻灯机, 内容页面使用``组件渲染
**carousel**: 走马灯, 内容页面使用``组件渲) | string | no | iOS/Android | yes | +| barPosition | 分段工具条位置 (top, bottom) | string | no | iOS/Android | yes | +| barStyle | 分段工具条样式 | style | no | iOS/Android | yes | +| justifyItem | Item 排列模式。(
**fixed**: 固定位置等宽排列;
**scrollable**: 可滚动，Item 数量较多一屏显示不下时使用这种模式) | string | no | iOS/Android | yes | +| indicatorType | 分段工具条激活指示器类型。(
**none**: 无
**boxWidth**: 等分区间宽度
**itemWidth**: Item 内容宽度) | string | no | iOS/Android | yes | +| indicatorPosition | 分段工具条激活指示器位置 (top, bottom) | string | no | iOS/Android | yes | +| indicatorLineColor | 激活指示器颜色 (默认值在 Theme 中设置) | string | no | iOS/Android | yes | +| indicatorLineWidth | 激活指示器线宽度 (默认值在 Theme 中设置) | number | no | iOS/Android | yes | +| indicatorPositionPadding | 激活指示器与上边界或下边界的距离 (默认值在 Theme 中设置) | number | no | iOS/Android | yes | +| animated | 分段工具条改变激活 Item 时是否有动画效果 | bool | no | iOS/Android | yes | +| autoScroll | 分段工具条是否自动滚动激活 Item 到容器中间 (仅 justifyItem 为 'scrollable' 时有效) | bool | no | iOS/Android | yes | +| activeIndex | 分段工具条激活 Item 序号 | number | no | iOS/Android | yes | | onChange | 页面改变事件 | function | no | iOS/Android | yes | **静态属性：** @@ -478,30 +526,34 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 **SegmentedView.Sheet 属性：** +- SegmentedView.Sheet 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | 标题 | string/number/element | no | iOS/Android | yes | -| titleStyle | 标题样式 | style | no | iOS/Android | yes | -| activeTitleStyle | 激活标题样式 | style | no | iOS/Android | yes | -| badge | 徽章 | string/number/element | no | iOS/Android | yes | +| titleStyle | 标题样式 (当 title 类型为 element 时无效) | style | no | iOS/Android | yes | +| activeTitleStyle | 激活标题样式 (当 title 类型为 element 时无效) | style | no | iOS/Android | yes | +| badge | 徽章 (为字符串、数字时使用 ``组件渲染) | string/number/element | no | iOS/Android | yes | ### 17. TabView - 标签页 -底部标签页导航组件。 +TabView 组件定义一个标签页组件, 用于在一个页面上显示多个子页面, 通过页面底部的 TabBar 切换子页面。 + +- TabView 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| type | 类型 (projector, carousel) | string | no | iOS/Android | yes | +| type | 标签页类型。(
**projector**: 幻灯机, 子页面使用``组件渲染
**carousel**: 走马灯, 子页面使用``组件渲染) | string | no | iOS/Android | yes | | barStyle | TabBar 工具条样式 | style | no | iOS/Android | yes | | activeIndex | 活动 Sheet 序号 | number | no | iOS/Android | yes | -| onChange | 页面改变事件 | function | no | iOS/Android | yes | +| onChange | 页面改变事件 (改变当前页面时调用, index 为当前 Sheet 序号) | function | no | iOS/Android | yes | **静态属性：** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | Sheet | 标签页 Sheet 组件 | class | no | iOS/Android | yes | -| Button | 标签页按钮组件 | class | no | iOS/Android | yes | +| Button | 标签页按钮组件 (此组件由 Sheet 组件自动渲染, 无须代码显式声明, 但可以修改 TabView.Button 为自定义类以更改标签页按钮组件) | class | no | iOS/Android | yes | **TabView.Sheet 属性：** @@ -509,193 +561,222 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 | ---- | ----------- | ---- | -------- | -------- | ------------------ | | type | Sheet类型 (sheet, button) | string | no | iOS/Android | yes | | title | 标题 | string/number/element | no | iOS/Android | yes | -| icon | 图标 | ImageSource/element | no | iOS/Android | yes | +| icon | 激活状态按钮图标 | ImageSource/element | no | iOS/Android | yes | | activeIcon | 激活图标 | ImageSource/element | no | iOS/Android | yes | -| badge | 徽章 | string/number/element | no | iOS/Android | yes | +| badge | 徽章 (为字符串、数字时使用 ``组件渲染) | string/number/element | no | iOS/Android | yes | | onPress | 点击事件 | function | no | iOS/Android | yes | **TabView.Button 属性：** +- TabView.Button 组件继承 **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | 标题 | string/number/element | no | iOS/Android | yes | -| titleStyle | 标题样式 | style | no | iOS/Android | yes | -| activeTitleStyle | 激活标题样式 | style | no | iOS/Android | yes | -| icon | 图标 | ImageSource/element | no | iOS/Android | yes | -| activeIcon | 激活图标 | ImageSource/element | no | iOS/Android | yes | -| badge | 徽章 | string/number/element | no | iOS/Android | yes | +| titleStyle | 标题样式 (当 title 类型为 element 时无效) | style | no | iOS/Android | yes | +| activeTitleStyle | 激活状态标题样式 (当 title 类型为 element 时无效) | style | no | iOS/Android | yes | +| icon | 按钮图标 | ImageSource/element | no | iOS/Android | yes | +| activeIcon | 激活状态按钮图标 | ImageSource/element | no | iOS/Android | yes | +| badge | 徽章 (为字符串、数字时使用 ``组件渲染) | string/number/element | no | iOS/Android | yes | | active | 是否激活 | bool | no | iOS/Android | yes | ### 18. TransformView - 可变视图 -支持缩放和拖动的视图组件。 +TransformView 组件定义一个可变视图, 支持双指按捏缩放、单指触摸移动手势。 + +- TransformView 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| containerStyle | 容器样式 | style | no | iOS/Android | yes | -| maxScale | 最大缩放比例 | number | no | iOS/Android | yes | -| minScale | 最小缩放比例 | number | no | iOS/Android | yes | -| magnetic | 磁性边缘 | bool | no | iOS/Android | yes | -| tension | 拉动张力系数 | number | no | iOS/Android | yes | -| onWillTransform | 变换开始事件 | function | no | iOS/Android | yes | -| onTransforming | 变换进行中事件 | function | no | iOS/Android | yes | -| onDidTransform | 变换结束事件 | function | no | iOS/Android | yes | -| onWillMagnetic | 磁性边框效果开始前调用 | function | no | iOS/Android | yes | -| onDidMagnetic | 磁性边框效果结束时调用 | function | no | iOS/Android | yes | -| onPress | 点击事件 | function | no | iOS/Android | yes | -| onLongPress | 长按事件 | function | no | iOS/Android | yes | +| containerStyle | 内部容器样式 | style | no | iOS/Android | yes | +| maxScale | 最大缩放倍数 | number | no | iOS/Android | yes | +| minScale | 最小缩放倍数 | number | no | iOS/Android | yes | +| magnetic | 磁性边框 (当缩放后尺寸小于视图尺寸时自动放大到视图大小) | bool | no | iOS/Android | yes | +| tension | 拉拽阻力 (当图片边缘在视图内时继续拉拽有阻力效果) | number | no | iOS/Android | yes | +| onWillTransform | Transform 开始 (三个参数分别为 x 坐标、y 坐标、缩放倍数) | function | no | iOS/Android | yes | +| onTransforming | Transform 进行中 (三个参数分别为 x 坐标、y 坐标、缩放倍数) | function | no | iOS/Android | yes | +| onDidTransform | Transform 结束 (三个参数分别为 x 坐标、y 坐标、缩放倍数) | function | no | iOS/Android | yes | +| onWillMagnetic | 磁性边框效果开始前调用 (返回 true 允许磁性边框效果，否则阻止磁性边框效果效果， magnetic = true 时有效) | function | no | iOS/Android | yes | +| onDidMagnetic | 磁性边框效果结束时调用 (三个参数分别为 x 坐标、y 坐标、缩放倍数) | function | no | iOS/Android | yes | +| onPress | 单击事件 (触摸结束时调用, 与 TouchableOpacity.onPress 一致) | function | no | iOS/Android | yes | +| onLongPress | 长按事件 (按压组件超过 500ms 时调用, 与 TouchableOpacity.onLongPress 一致) | function | no | iOS/Android | yes | ### 19. AlbumView - 相册视图 -图片相册浏览组件。 +AlbumView 组件定义一个相册视图, 支持多图左右切换显示，支持双指按捏缩放、单指触摸移动手势。 + +- AlbumView 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| images | 图片数组 | array | yes | iOS/Android | yes | -| thumbs | 缩略图数组 | array | no | iOS/Android | yes | -| index | 当前显示索引 | number | no | iOS/Android | yes | -| defaultIndex | 默认显示索引 | number | no | iOS/Android | yes | -| maxScale | 最大缩放比例 | number | no | iOS/Android | yes | -| space | 图片间距 | number | no | iOS/Android | yes | -| control | 页面指示器 | element | no | iOS/Android | yes | -| onWillChange | 页面将要改变事件 | function | no | iOS/Android | yes | -| onChange | 页面改变事件 | function | no | iOS/Android | yes | -| onPress | 点击事件 | function | no | iOS/Android | yes | -| onLongPress | 长按事件 | function | no | iOS/Android | yes | -| onWillLoadImage | 将要加载图片事件 | function | no | iOS/Android | yes | -| onLoadImageSuccess | 加载成功事件 | function | no | iOS/Android | yes | -| onLoadImageFailure | 加载失败事件 | function | no | iOS/Android | yes | +| images | 相册图片数组 (数组元素为 ImageSource 或 React Native 组件) | array | yes | iOS/Android | yes | +| thumbs | 相册缩略图数组 (数组元素为 ImageSource ) | array | no | iOS/Android | yes | +| index | 显示图片索引 (设置此属性需要监听 onChange 事件并自行维护状态) | number | no | iOS/Android | yes | +| defaultIndex | 默认显示图片索引 | number | no | iOS/Android | yes | +| maxScale | 最大缩放倍数 | number | no | iOS/Android | yes | +| space | 相册图片间隔空间 | number | no | iOS/Android | yes | +| control | 页面控制器 (为 true 时显示默认页面控制器, 也可以传入自定义的页面控制器, 建议使用 Carousel.Control 组件) | element | no | iOS/Android | yes | +| onWillChange | 改变当前页面前时调用 (index 为当前页面索引值, newIndex 为将要改变的页面索引值) | function | no | iOS/Android | yes | +| onChange | 改变当前页面完成后调用 (index 为改变后页面索引值, oldIndex 为改变前页面索引值) | function | no | iOS/Android | yes | +| onPress | 单击事件 (触摸结束时调用) | function | no | iOS/Android | yes | +| onLongPress | 长按事件 (按压组件超过 500ms 时调用) | function | no | iOS/Android | yes | +| onWillLoadImage | 加载图片前调用 | function | no | iOS/Android | yes | +| onLoadImageSuccess | 加载图片成功时调用 | function | no | iOS/Android | yes | +| onLoadImageFailure | 加载图片失败时调用 | function | no | iOS/Android | yes | ### 20. Wheel - 滚轮 -滚轮选择器组件。 +Wheel 组件定义一个滚轮, 可用于滚轮式选择器。 + +- Wheel 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| items | 选项数组 | array | yes | iOS/Android | yes | -| itemStyle | 选项样式 | style | no | iOS/Android | yes | -| holeStyle | 当前项窗口样式 | style | no | iOS/Android | yes | +| items | 可选项列表 (数组元素可以是字符串、数字或 React Native 组件) | array | yes | iOS/Android | yes | +| itemStyle | 选项样式 (当 items 数组元素是 React Native 组件时无效) | style | no | iOS/Android | yes | +| holeStyle | 当前项窗口样式 (需指定 height 属性) | style | no | iOS/Android | yes | | maskStyle | 当前项上下蒙版样式 | style | no | iOS/Android | yes | -| holeLine | 当前项窗口分隔线 | string | no | iOS/Android | yes | -| index | 当前索引 | number | no | iOS/Android | yes | -| defaultIndex | 默认索引 | number | no | iOS/Android | yes | -| onChange | 选项改变事件 | function | no | iOS/Android | yes | +| holeLine | 当前项窗口分隔线 | number/element | no | iOS/Android | yes | +| index | 当前索引 (设置此属性需要监听 onChange 事件并自行维护状态) | number | no | iOS/Android | yes | +| defaultIndex | 默认当前项索引值 (仅在组件创建时使用一次，如不想设置 index 并维护状态，可在此属性传入初始项索引值) | number | no | iOS/Android | yes | +| onChange | 改变当前项完成后调用 (index 为改变后当前项索引值) | function | no | iOS/Android | yes | + ### 21. Overlay - 浮层 -浮层显示组件。 +Overlay 为浮层静态类, 是 Teaset 里非常重要的组成部分。 + +一般而言内容展示页面是二维的平面结构, 有一些辅助性的 UI 界面, 比如菜单、提示框、选择列表框等, 这并不属于主体内容的一部分, 但却是不可缺少的, 在开发时需要投入大量的时间来开发这部分代码，而且这部分代码会与主体内容的代码搅在一起, 增加代码维护的复杂度。 + +Overlay 使得 React Native 开发从二维变成三维的, 你可以在页面上覆盖任意层的浮层, 而且浮层界面使用函数方法来激活显示, 你完全可以把浮层代码从页面主体内容的 JSX 中剥离出来。 + +另外, Overlay 支持多种动画效果, 如淡入淡出、弹出、抽屉效果等, 让你的交互生动起来。 **静态方法：** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | 显示浮层视图 | function | yes | iOS/Android | yes | -| hide | 隐藏浮层视图 | function | yes | iOS/Android | yes | +| show | 显示一个浮层视图 (输入参数 overlayView 为浮层视图, 推荐使用 Overlay.View 组件, 返回唯一的浮层 key 值) | function | yes | iOS/Android | yes | +| hide | 隐藏一个浮层视图 (输入参数 key 为浮层的 key 值) | function | yes | iOS/Android | yes | **静态属性：** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| View | 浮层组件 | class | yes | iOS/Android | yes | -| PullView | 拖拉效果浮层组件 | class | no | iOS/Android | yes | -| PopView | 弹出效果浮层组件 | class | no | iOS/Android | yes | -| PopoverView | 气泡效果浮层组件 | class | no | iOS/Android | yes | +| View | 浮层组件 (传入 Overlay.show 函数的组件都应是 Overlay.View 组件或继承自 Overlay.View 的组件。 Overlay.View 是浮层的根组件, 你可以在上面显示任何内容) | class | yes | iOS/Android | yes | +| PullView | 拖拉效果浮层组件 (继承自 Overlay.View, 具有类似抽屉一样的拖拉效果) | class | no | iOS/Android | yes | +| PopView | 弹出效果浮层组件 (继承自 Overlay.View) | class | no | iOS/Android | yes | +| PopoverView | 气泡效果浮层组件 (继承自 Overlay.View) | class | no | iOS/Android | yes | + **Overlay.View - 浮层** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | style | 浮层样式 | style | no | iOS/Android | yes | -| modal | 是否模态 | bool | no | iOS/Android | yes | -| animated | 是否启用动画 | bool | no | iOS/Android | yes | -| overlayOpacity | 背景不透明度 | number | no | iOS/Android | yes | +| modal | 是否为模态浮层 (非模态浮层在点击内容之外的半透明区域可关闭浮层, 模态浮层则需要代码手动关闭) | bool | no | iOS/Android | yes | +| animated | 是否支持动画效果 | bool | no | iOS/Android | yes | +| overlayOpacity | 浮层非内容区域透明度 (值从 0 到 1, 透明度从全透明到不透明。默认值在 Theme 中设置) | number | no | iOS/Android | yes | | overlayPointerEvents | 背景触摸事件 (auto, none) | string | no | iOS/Android | yes | -| autoKeyboardInsets | 自动键盘占位 | bool | no | iOS/Android | yes | -| onAppearCompleted | 浮层显示完成事件 | function | no | iOS/Android | yes | -| onDisappearCompleted | 浮层消失完成事件 | function | no | iOS/Android | yes | -| onCloseRequest | 浮层关闭请求事件(在点击内容之外的半透明区域时调用) | function | no | iOS/Android | yes | +| autoKeyboardInsets | 在弹出键盘时是否自动缩减键盘高度空间 | bool | no | iOS/Android | yes | +| onAppearCompleted | 在浮层显示完毕时调用 | function | no | iOS/Android | yes | +| onDisappearCompleted | 在浮层隐藏完毕后调用 | function | no | iOS/Android | yes | +| onCloseRequest | 浮层关闭请求事件(在点击内容之外的半透明区域时调用,如设置此值 modal 将无效) | function | no | iOS/Android | yes | + **Overlay.PullView - 拖拉浮层** -继承 Overlay.View 所有属性，额外支持： +- Overlay.PullView 组件继承 **[Overlay.View](#overlay-view)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | side | 抽屉弹出方向 (top, bottom, left, right) | string | no | iOS/Android | yes | -| containerStyle | 容器样式 | style | no | iOS/Android | yes | -| rootTransform | 根变换 (none, translate, scale) | string/array | no | iOS/Android | yes | +| containerStyle | 抽屉容器样式 | style | no | iOS/Android | yes | +| rootTransform | 浮层弹出时根组件转换动画 (
**none**: 无转换
**translate**: 位移转换, 把根组件往浮层弹出方向移动
**scale**: 缩小转换, 缩小倍数在 Theme 中定义
**Transform** 目前支持 translateX 、 translateY 、 scaleX 、 scaleY, 类型定义：
type Transform {
  translateX: number,
  translateY: number,
  scaleX: number,
  scaleY: number,
}
) | string/array | no | iOS/Android | yes | +| animated | 是否支持动画效果 (继承自 Overlay.View 并修改默认属性) | style | no | iOS/Android | yes | **Overlay.PopView - 弹出浮层** -继承 Overlay.View 所有属性，额外支持： +- Overlay.PopView 组件继承 **[Overlay.View](#overlay-view)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| type | 显示类型 (zoomOut, zoomIn, custom) | string | no | iOS/Android | yes | +| type | 弹出效果。(
**zoomOut**: 缩小, 弹出框放大后动画过度到原大
**zoomIn**: 放大, 弹出框缩小后动画过度到原大
**custom**: 自定义, 弹出框从 customBounds 位置和大小动画过度到原大) | string | no | iOS/Android | yes | | containerStyle | 弹出框容器样式 | style | no | iOS/Android | yes | -| customBounds | 自定义边界 | object | no | iOS/Android | yes | +| customBounds | 弹出框动画过度起始位置和大小 (type = 'custom' 时有效。
type Rect {
  x: number,
  y: number,
  width: number,
  height: number,
}) | object | no | iOS/Android | yes | +| animated | 是否支持动画效果 (继承自 Overlay.View 并修改默认属性) | style | no | iOS/Android | yes | + **Overlay.PopoverView - 气泡浮层** -继承 Overlay.View 所有属性，额外支持： +Overlay.PopoverView 组件继承 **[Overlay.View](#overlay-view)** 组件的全部属性和事件。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | popoverStyle | 气泡样式 | style | no | iOS/Android | yes | -| fromBounds | 起始边界 | object | yes | iOS/Android | yes | +| fromBounds | 弹出气泡源组件 bounds, 气泡箭头将指向这个组件。
type Rect {
  x: number,
  y: number,
  width: number,
  height: number,
} | object | yes | iOS/Android | yes | | direction | 箭头方向 (up, down, left, right) | string | no | iOS/Android | yes | -| autoDirection | 自动调整方向 | bool | no | iOS/Android | yes | -| directionInsets | 方向偏移 | number | no | iOS/Android | yes | -| align | 对齐方式 (start, center, end) | string | no | iOS/Android | yes | -| alignInsets | 对齐偏移 | number | no | iOS/Android | yes | -| showArrow | 是否显示箭头 | bool | no | iOS/Android | yes | -| paddingCorner | 圆角内边距 | number | no | iOS/Android | yes | -| overlayOpacity | 气泡不透明度 | number | no | iOS/Android | yes | +| autoDirection | 是否自动调整弹出方向 (为 true 时, 如弹出方向屏幕空间不足则往反方向弹出, 例如 direction = 'down' 时, 如 fromBounds 下方的空间不足则往上方弹出。) | bool | no | iOS/Android | yes | +| directionInsets | 气泡与弹出组件 fromBounds 之间的距离 | number | no | iOS/Android | yes | +| align | 气泡与弹出组件 fromBounds 的对齐方式。(
**start**: 起始位置对齐, 上边或左边
**center**: 居中对齐
**end**: 起始位置对齐, 下边或右边) | string | no | iOS/Android | yes | +| alignInsets | 对齐方向偏移量 | number | no | iOS/Android | yes | +| showArrow | 是否显示气泡箭头 | bool | no | iOS/Android | yes | +| paddingCorner | 箭头与对齐角的距离 (默认值在 Theme 中设置) | number | no | iOS/Android | yes | +| overlayOpacity | 气泡不透明度 (继承自 Overlay.View 并修改默认值) | number | no | iOS/Android | yes | ### 22. Toast - 轻提示 - 提示框 +Toast 为轻提示静态类, 与 Android 的 Toast 作用类似。 +Toast 基于 [Overlay](#overlay){} 实现。 + +- Toast 继承 **[Overlay](#overlay)** 的全部静态方法。 **静态方法：** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | 显示提示 | function | no | iOS/Android | yes | -| message | 显示消息 | function | no | iOS/Android | yes | -| success | 显示成功提示 | function | no | iOS/Android | yes | -| fail | 显示失败提示 | function | no | iOS/Android | yes | -| smile | 显示笑脸提示 | function | no | iOS/Android | yes | -| sad | 显示难过提示 | function | no | iOS/Android | yes | -| info | 显示信息提示 | function | no | iOS/Android | yes | -| stop | 显示停止提示 | function | no | iOS/Android | yes | +| show | 显示一个轻提示, 重写 Overlay{} 中的同名函数, 输入参数 options 为 duration 与 [ToastView](#toasttoastview--props) 的属性合集, 返回唯一的浮层 key 值。
**一般不直接调用此函数** | function | no | iOS/Android | yes | +| message | 显示一个纯文本轻提示框。(
duration 默认为 'short', position 默认为 'bottom' 。
默认值可通过 Toast.messageDefaultDuration 、 Toast.messageDefaultPosition 修改) | function | no | iOS/Android | yes | +| success | 显示一个成功轻提示框, 提示框中有一个打勾图标。(
duration 默认为 'short', position 默认为 'center' 。
默认值可通过 Toast.defaultDuration 、 Toast.defaultPosition 修改)
**下同** | function | no | iOS/Android | yes | +| fail | 显示一个失败轻提示框, 提示框中有一个打叉图标 | function | no | iOS/Android | yes | +| smile | 显示一个笑脸轻提示框, 提示框中有一个笑脸表情图标 | function | no | iOS/Android | yes | +| sad | 显示一个难过轻提示框, 提示框中有一个难过表情图标 | function | no | iOS/Android | yes | +| info | 显示一个信息轻提示框, 提示框中有一个 Info 图标 | function | no | iOS/Android | yes | +| stop | 显示一个停止轻提示框, 提示框中有一个图标 | function | no | iOS/Android | yes | **静态属性：** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | |ToastView| Toast 内容显示组件 | class | yes | iOS/Android | yes | -| defaultDuration | 轻提示框显示时长 | string | no | iOS/Android | yes | -| defaultPosition | 轻提示框显示位置 | string | no | iOS/Android | yes | +| defaultDuration | success, fail, smile, sad, info, stop 函数的 duration 参数默认值, 轻提示框显示时长。(
**short**: 2000 毫秒
**long**: 3500毫秒) | string | no | iOS/Android | yes | +| defaultPosition | success, fail, smile, sad, info, stop 函数的 position 参数默认值, 轻提示框显示位置 (参见 [Toast.ToastView](#toasttoastview--props)) | string | no | iOS/Android | yes | | messageDefaultDuration | message 函数的 duration 参数默认值 | string | no | iOS/Android | yes | | messageDefaultPosition | message 函数的 position 参数默认值 | string | no | iOS/Android | yes | + **Toast.ToastView** +- Toast.ToastView 组件继承 **[View](https://reactnative.dev/docs/view.html)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | text | 轻提示文本 | string/number/element | no | iOS/Android | yes | -| icon | 图标(none, success, fail, smile, sad, info, stop) | string/ImageSource/element | no | iOS/Android | yes | -| position | 轻提示框显示位置(top, bottom, center) | string | no | iOS/Android | yes | +| icon | 图标 (
**none**: 无图标
**success**: 成功, 打勾图标
**fail**: 失败, 打叉图标
**smile**: 笑脸表情图标
**sad**: 难过表情图标
**info**: 信息, 圆圈里一个字母 "i"
**stop**: 停止, 圆圈里一个感叹号 "!")| string/ImageSource/element | no | iOS/Android | yes | +| position | 轻提示框显示位置 (
**top**: 窗口靠上位置
**bottom**: 窗口靠下位置
**center**: 窗口中间位置
top 、 bottom 位置可在 Theme 中设置) | string | no | iOS/Android | yes | ### 23. ActionSheet - 操作选单 -底部操作选单 +ActionSheet 为操作选单静态类, 一般用于触发一个多项子操作供用户选择, 表现形式为从屏幕下方拖出抽屉。 +ActionSheet 基于 [Overlay](#overlay){} 实现。 **静态方法：** +- ActionSheet 继承 **[Overlay](#overlay)** 的全部静态方法。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | 显示操作选单 | function | yes | iOS/Android | yes | +| show | 显示一个操作选单, 重写 Overlay{} 中的同名函数, 输入参数 items 为操作选单项列表, cancelItem(可空)为取消操作项, options(可空)为 ActionSheet.ActionSheetView 其它属性, 参数类型参见 [ActionSheetView](#actionsheetactionsheetview--props)。
返回唯一的浮层 key 值。 | function | yes | iOS/Android | yes | **静态属性：** @@ -703,12 +784,15 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 | ---- | ----------- | ---- | -------- | -------- | ------------------ | | ActionSheetView| ActionSheet 内容显示组件 | class | no | iOS/Android | yes | + **ActionSheet.ActionSheetView** +- ActionSheet.ActionSheetView 组件继承 **[Overlay.PullView](#overlay-pullview)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| items | 操作项数组 | array | yes | iOS/Android | yes | -| cancelItem | 取消按钮 | object | no | iOS/Android | yes | +| items | 操作选单项列表 (数组元素类型为:
type ActionSheetItem {
  title: string,
  onPress: func,
  disabled: bool,
}) | array | yes | iOS/Android | yes | +| cancelItem | 取消操作项 (
type ActionSheetItem {
  title: string,
  onPress: func,
  disabled: bool,
}) | object | no | iOS/Android | yes | **ActionSheet.ActionSheetView 静态属性:** @@ -718,23 +802,28 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 **ActionSheet.ActionSheetView.Item** +- ActionSheet.ActionSheetView.Item 组件继承 **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | type | 类型 | string | no | iOS/Android | yes | | title | 标题 | string/number/element | yes | iOS/Android | yes | -| topSeparator | 上分隔线(none, full, indent) | string/element | no | iOS/Android | yes | -| bottomSeparator | 下分隔线(none, full, indent) | string/element | no | iOS/Android | yes | -| disabled | 是否禁用 | bool | no | iOS/Android | yes | +| topSeparator | 上分隔线(none, full, indent) (缩进分隔线仅左侧缩进) | string/element | no | iOS/Android | yes | +| bottomSeparator | 下分隔线(none, full, indent) (缩进分隔线仅左侧缩进) | string/element | no | iOS/Android | yes | +| disabled | 是否禁用 (继承自 TouchableOpacity, 为 true 时组件显示为半透明且不可触摸) | bool | no | iOS/Android | yes | ### 24. ActionPopover - 操作气泡 -气泡式操作菜单 +ActionPopover 为操作气泡静态类, 一般用于触发一个多项子操作供用户选择, 表现形式为从触发源组件弹出的气泡。 +ActionPopover 基于 [Overlay](#overlay){} 实现。 **静态方法：** +- ActionPopover 继承 **[Overlay](#overlay)** 的全部静态方法 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | 显示操作气泡 | function | yes | iOS/Android | yes | +| show | 显示一个操作气泡, 重写 Overlay{} 中的同名函数, 输入参数 fromBounds 为弹出气泡源组件 bounds, items 为操作项列表, options(可空)为 ActionPopover.ActionPopoverView 其它属性, 参数类型参见 [ActionPopoverView](#actionpopoveractionpopoverview--props)。
返回唯一的浮层 key 值。 | function | yes | iOS/Android | yes | **静态属性：** @@ -742,14 +831,17 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 | ---- | ----------- | ---- | -------- | -------- | ------------------ | | ActionPopoverView | ActionPopover 内容显示组件 | class | yes | iOS/Android | yes | + **ActionPopover.ActionPopoverView** +- ActionPopover.ActionPopoverView 组件继承 **[Overlay.PopoverView](#overlay-popoverview)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| items | 操作项数组 | array | yes | iOS/Android | yes | -| direction | 气泡方向 (up, down, left, right) | string | no | iOS/Android | yes | -| align | 对齐方式 (start, center, end) | string | no | iOS/Android | yes | -| showArrow | 是否显示箭头 | bool | no | iOS/Android | yes | +| items | 操作项列表 (数组元素类型为:
type ActionPopoverItem {
  title: string,
  onPress: func,
}) | array | yes | iOS/Android | yes | +| direction | 气泡方向 (up, down, left, right) (继承自 Overlay.PopoverView 并修改默认值) | string | no | iOS/Android | yes | +| align | 对齐方式 (start, center, end) (继承自 Overlay.PopoverView 并修改默认值) | string | no | iOS/Android | yes | +| showArrow | 是否显示箭头 (继承自 Overlay.PopoverView 并修改默认值) | bool | no | iOS/Android | yes | **ActionPopover.ActionPopoverView 静态属性** @@ -759,6 +851,8 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 **ActionPopover.ActionPopoverView.Item属性：** +- ActionPopover.ActionPopoverView.Item 组件继承 **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | 项标题 | string/number/element | yes | iOS/Android | yes | @@ -767,13 +861,16 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 ### 25. PullPicker - 上拉选择器 -底部上拉式选择器。 +PullPicker 为上拉选择器静态类, 一般用于触发显示一个数据列表供用户选择, 表现形式为从屏幕下方拖出抽屉。 +PullPicker 基于 [Overlay](#overlay){} 实现。 **静态方法:** +- PullPicker 继承 **[Overlay](#overlay)** 的全部静态方法。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | 显示选择器 | function | yes | iOS/Android | yes | +| show | 显示一个上拉选择器, 重写 Overlay{} 中的同名函数, 输入参数 title 为列表标题, items 为可选项列表, selectedIndex 为已选项编号, onSelected 为选择某项时的回调函数, options(可空)为 PullPicker.PullPickerView 其它属性, 参数类型参见 [PullPickerView](#pullpickerpullpickerview--props)。
返回唯一的浮层 key 值。 | function | yes | iOS/Android | yes | **静态属性:** @@ -781,15 +878,18 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 | ---- | ----------- | ---- | -------- | -------- | ------------------ | | PullPickerView | PullPicker 内容显示组件 | class | yes | iOS/Android | yes | + **PullPicker.PullPickerView** +- PullPicker.PullPickerView 组件继承 **[Overlay.PullView](#overlay-pullview)** 组件的全部属性和事件。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | 列表标题 | string | no | iOS/Android | yes | | items | 可选项列表 | array | yes | iOS/Android | yes | | selectedIndex | 当前已选择项编号 | number | no | iOS/Android | yes | -| getItemText | 取 items 数组元素的显示文本 | function | no | iOS/Android | yes | -| onSelected | 选择某项时的回调函数 | function | no | iOS/Android | yes | +| getItemText | 取 items 数组元素的显示文本, 传入参数为(item, index), item = items[index], 默认直接使用 item | function | no | iOS/Android | yes | +| onSelected | 当选择器选择 items 数组某项时调用, item = items[index] | function | no | iOS/Android | yes | **PullPicker.PullPickerView静态属性：** @@ -799,19 +899,24 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 **PullPicker.PullPickerView.Item属性** +- PullPicker.PullPickerView.Item 组件继承 **[ListRow](#listrow)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | selected | 是否已选中 | bool | no | iOS/Android | yes | ### 26. PopoverPicker - 气泡选择器 -气泡式选择器。 +PopoverPicker 为气泡选择器静态类, 一般用于触发显示一个数据列表供用户选择, 表现形式为从触发源组件弹出的气泡。 +PopoverPicker 基于 [Overlay](#overlay){} 实现。 **静态方法:** +- PopoverPicker 继承 **[Overlay](#overlay)** 的全部静态方法。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | 显示选择器 | function | yes | iOS/Android | yes | +| show | 显示一个气泡选择器, 重写 Overlay{} 中的同名函数, 输入参数 fromBounds 为弹出气泡源组件 bounds, items 为可选项列表, selectedIndex 为已选项编号, onSelected 为选择某项时的回调函数, options(可空)为 PopoverPicker.PopoverPickerView 其它属性, 参数类型参见 [PopoverPickerView](#popoverpickerpopoverpickerview--props)。
返回唯一的浮层 key 值 | function | yes | iOS/Android | yes | **静态属性:** @@ -819,18 +924,21 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 | ---- | ----------- | ---- | -------- | -------- | ------------------ | | PopoverPickerView | PopoverPicker 内容显示组件 | class | yes | iOS/Android | yes | + **PopoverPicker.PopoverPickerView属性** +- PopoverPicker.PopoverPickerView 组件继承 **[Overlay.PopoverView](#overlay-popoverview)** 组件的全部属性和事件。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | items | 选项数组 | array | yes | iOS/Android | yes | -| selectedIndex | 选中索引 | number | no | iOS/Android | yes | -| getItemText | 取 items 数组元素的显示文本 | function | no | iOS/Android | yes | +| selectedIndex | 当前已选择项编号 | number | no | iOS/Android | yes | +| getItemText |取 items 数组元素的显示文本, 传入参数为(item, index), item = items[index], 默认直接使用 item | function | no | iOS/Android | yes | | shadow | 是否显示阴影 | bool | no | iOS | yes | -| direction | 箭头方向 (up, down, left, right) | string | no | iOS/Android | yes | -| align | 对齐方式 (start, center, end) | string | no | iOS/Android | yes | -| showArrow | 是否显示箭头 | bool | no | iOS/Android | yes | -| onSelected | 选中事件 | function | no | iOS/Android | yes | +| direction | 箭头方向 (up, down, left, right) (继承自 Overlay.PopoverView 并修改默认值) | string | no | iOS/Android | yes | +| align | 对齐方式 (start, center, end) (继承自 Overlay.PopoverView 并修改默认值) | string | no | iOS/Android | yes | +| showArrow | 是否显示箭头 (继承自 Overlay.PopoverView 并修改默认值) | bool | no | iOS/Android | yes | +| onSelected | 当选择器选择 items 数组某项时调用, item = items[index] | function | no | iOS/Android | yes | **PopoverPicker.PopoverPickerView静态属性** @@ -840,6 +948,8 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 **PopoverPicker.PopoverPickerView.Item属性** +- PopoverPicker.PopoverPickerView.Item 组件继承 **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | 标题 | string/number/element | no | iOS/Android | yes | @@ -847,13 +957,16 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 ### 27. Menu - 菜单 -弹出菜单。 +Menu 为菜单静态类, 用于触发显示一个弹出菜单供用户选择, 表现形式为从触发源组件弹出的气泡。 +Menu 基于 [Overlay](#overlay){} 实现。 **静态方法:** +- Menu 继承 **[Overlay](#overlay)** 的全部静态方法。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | 显示菜单 | function | yes | iOS/Android | yes | +| show | 显示一个弹出菜单, 重写 Overlay{} 中的同名函数, 输入参数 fromBounds 为弹出菜单源组件 bounds, items 为菜单项列表, options(可空)为 Menu.MenuView 其它属性, 参数类型参见 [MenuView](#menumenuview--props)。
返回唯一的浮层 key 值 | function | yes | iOS/Android | yes | **静态属性:** @@ -861,15 +974,18 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 | ---- | ----------- | ---- | -------- | -------- | ------------------ | | MenuView | Menu 内容显示组件 | class | no | iOS/Android | yes | + **Menu.MenuView属性：** +- Menu.MenuView 组件继承 **[Overlay.PopoverView](#overlay-popoverview)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| items | 菜单项数组 | array | no | iOS/Android | yes | +| items | 菜单项列表 (数组元素类型为:
type MenuViewItem {
  title: string,
  icon: any,
  onPress: func,
}
icon 详细类型参见[Menu.MenuView.Item](#menumenuviewitem--props) )| array | no | iOS/Android | yes | | shadow | 是否显示阴影 | bool | no | iOS | yes | -| direction | 箭头方向 (up, down, left, right) | string | no | iOS/Android | yes | -| align | 对齐方式 (start, center, end) | string | no | iOS/Android | yes | -| showArrow | 是否显示箭头 | bool | no | iOS/Android | yes | +| direction | 箭头方向 (up, down, left, right) (继承自 Overlay.PopoverView 并修改默认值)| string | no | iOS/Android | yes | +| align | 对齐方式 (start, center, end) (继承自 Overlay.PopoverView 并修改默认值)| string | no | iOS/Android | yes | +| showArrow | 是否显示箭头 (继承自 Overlay.PopoverView 并修改默认值)| bool | no | iOS/Android | yes | **Menu.MenuView静态属性:** @@ -877,22 +993,28 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 | ---- | ----------- | ---- | -------- | -------- | ------------------ | | Item| Menu 菜单项显示组件 | class | no | iOS/Android | yes | + **Menu.MenuView.Item属性:** +- Menu.MenuView.Item 组件继承 **[TouchableOpacity](https://reactnative.dev/docs/touchableopacity.html)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | 项标题 | string/number/element | no | iOS/Android | yes | -| icon | 图标 | element/ImageSource | no | iOS/Android | yes | +| icon | 图标 (
**none**: 无图标
**empty**: 空图标, 显示为空白并占用图标显示大小的空间) | string/element/ImageSource | no | iOS/Android | yes | ### 28. Drawer - 抽屉 -侧边抽屉。 +Drawer 为抽屉静态类, 内部视图为 [Overlay.PullView](#overlay-pullview) 的易用性简单封装。 +Drawer 基于 [Overlay](#overlay){} 实现。 **静态方法:** +- Drawer 继承 **[Overlay](#overlay)** 的全部静态方法。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| open | 打开抽屉 | function | yes | iOS/Android | yes | +| open | 打开一个抽屉。 参数说明：
**view**: 抽屉内部视图内容
**side**: 抽屉拉出边, 默认为 'left'
**rootTransform**: 根组件转换动画, 默认为 'none'
**options**: Drawer.DrawerView 其它属性, 参数类型参见 [DrawerView](#drawerdrawerview--props)
返回值为一个对象, 对象属性说明：
**key**: 浮层唯一键值
**close**: 关上抽屉函数, 调用该函数将关上抽屉 | function | yes | iOS/Android | yes | **静态属性:** @@ -900,19 +1022,23 @@ Theme 为全局主题配置，用于统一应用的视觉风格。 | ---- | ----------- | ---- | -------- | -------- | ------------------ | | DrawerView | Drawer 内容显示组件 | class | no | iOS/Android | yes | + **Drawer.DrawerView属性** -Drawer.DrawerView 组件继承 Overlay.PullView 组件的全部属性和事件。 +- Drawer.DrawerView 组件继承 **[Overlay.PullView](#overlay-pullview)** 组件的全部属性和事件。 ### 29. ModalIndicator - 模态指示器 -模态加载指示器。 +ModalIndicator 为模态指示器静态类, 一般在需要阻止用户操作时使用, 比如提交数据等, 表现形式为一个覆盖全屏的模态指示器。 +ModalIndicator 基于 **[Overlay](#overlay)** 实现。 **静态方法:** +- ModalIndicator 继承 **[Overlay](#overlay)** 的全部静态方法。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| show | 显示指示器 | function | yes | iOS/Android | yes | +| show | 弹出模态指示器, 重写 Overlay{} 中的同名函数, 输入参数 text 为模态指示器下显示的文本，如调用此函数前已显示模态指示器则仅更换文本。 | function | yes | iOS/Android | yes | | hide | 隐藏指示器 | function | yes | iOS/Android | yes | **静态属性:** @@ -923,12 +1049,14 @@ Drawer.DrawerView 组件继承 Overlay.PullView 组件的全部属性和事件 **ModalIndicator.IndicatorView参数：** +- ModalIndicator.IndicatorView 组件继承 **[View](https://facebook.github.io/react-native/docs/view.html)** 组件的全部属性。 + | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | text | 提示文本 | string/number/element | no | iOS/Android | yes | -| position | 显示位置 | string | no | iOS/Android | yes | +| position | 显示位置 | 模态指示器显示位置。
**top**: 窗口靠上位置
**bottom**: 窗口靠下位置
**center**: 窗口中间位置
top 、 bottom 位置可在 Theme 中设置。 | no | iOS/Android | yes | | size | 指示器大小 | string | no | iOS/Android | yes | -| color | 指示器颜色 | string | no | iOS/Android | yes | +| color | 指示器颜色 (默认值在 Theme 中设置) | string | no | iOS/Android | yes | ### 30. TeaNavigator - Tea导航器 @@ -948,12 +1076,14 @@ Drawer.DrawerView 组件继承 Overlay.PullView 组件的全部属性和事件 ### 31. BasePage - 基础页面 -页面基类组件。 +BasePage 定义一个基础页面组件, 是 Page 的抽象封装, 需要派生出新的类来使用, 提供一系列易于使用的可重写方法。 + +- BasePage 组件继承 **[View](https://facebook.github.io/react-native/docs/view.html)** 组件的全部属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | scene | 转场效果 | object | no | iOS/Android | yes | -| autoKeyboardInsets | 自动键盘占位 | bool | no | iOS/Android | yes | +| autoKeyboardInsets | 在弹出键盘时是否自动插入键盘占用空间, 插入键盘占用空间的目的是避免页面内容被键盘遮挡。 | bool | no | iOS/Android | yes | | keyboardTopInsets | 键盘顶部偏移 | number | no | iOS/Android | yes | 对于 **autoKeyboardInsets** 属性，**HarmonyOS的软键盘默认避让输入框**，如果需要关闭系统默认的软键盘避让可以参考[软键盘布局适配](https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-keyboard-layout-adapt#section19987195213425)或者以下步骤： @@ -975,38 +1105,42 @@ Drawer.DrawerView 组件继承 Overlay.PullView 组件的全部属性和事件 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| navigator | 导航器对象 | object | yes | iOS/Android | yes | +| navigator | 导航器对象 (只读属性变量) | object | yes | iOS/Android | yes | | didMount | 是否已挂载 | bool | yes | iOS/Android | yes | -| isFocused | 是否已聚焦 | bool | yes | iOS/Android | yes | +| isFocused | 是否已聚焦到此页面 | bool | yes | iOS/Android | yes | **生命周期方法：** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| onWillFocus | 将要获得焦点 | function | no | iOS/Android | yes | -| onDidFocus | 已获得焦点 | function | no | iOS/Android | yes | -| onHardwareBackPress | 硬件返回键 | function | no | Android/Harmony | yes | -| renderPage | 页面渲染函数 | function | yes | iOS/Android | yes | +| onWillFocus | 将要聚焦到此页面, 在页面转场动画开始前调用。
在派生类中重写此函数执行所需操作。 | function | no | iOS/Android | yes | +| onDidFocus | 已经聚焦到此页面, 在页面转场动画结束后调用。
在派生类中重写此函数执行所需操作。
如果页面初始化有较耗时的操作, 在初始化过程中容易引起页面转场动画卡顿, 建议把复杂的初始化代码放到此函数中处理。 | function | no | iOS/Android | yes | +| onHardwareBackPress | 当用户按下返回键(物理键, Android only)时调用 | function | no | Android | no | +| renderPage | 页面渲染函数, BasePage 所有派生类都应该重写此函数渲染界面, 而不是 render 函数 | function | yes | iOS/Android | yes | ### 32. NavigationPage - 导航页面 -带导航栏的页面组件（继承 BasePage）。 +NavigationPage 定义一个导航页面组件, 继承自 BasePage, 在 BasePage 的基础上添加一个 NavigationBar 导航条。 + +- NavigationPage 组件继承 **BasePage** 组件的全部属性。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | | title | 导航栏标题 | string | no | iOS/Android | yes | | showBackButton | 是否显示返回按钮 | bool | no | iOS/Android | yes | -| navigationBarInsets | 导航栏占位 | bool | no | iOS/Android | yes | -| scene | 转场效果 | object | no | iOS/Android | yes | +| navigationBarInsets | 是否为内容区域增加导航条占用空间。(此属性默认为 true, 使得内容不被导航条遮挡, 如果页面内容实用 ScrollView 且需要自行控制 NavigationBar 导航条的显示/隐藏, 那么你需要将此属性设置为 false 并自行在 ScrollView 容器里增加导航条的占用空间, 这样可以在导航条隐藏后把顶部空间利用起来) | bool | no | iOS/Android | yes | +| scene | 转场效果 (继承自 BasePage 并修改默认值) | object | no | iOS/Android | yes | + +**方法：** -**可重写方法：** +- NavigationPage 组件继承 **BasePage** 组件的全部方法。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---- | ----------- | ---- | -------- | -------- | ------------------ | -| renderNavigationTitle | 渲染导航栏标题 | function | no | iOS/Android | yes | -| renderNavigationLeftView | 渲染导航栏左视图 | function | no | iOS/Android | yes | -| renderNavigationRightView | 渲染导航栏右视图 | function | no | iOS/Android | yes | -| renderNavigationBar | 渲染导航栏 | function | no | iOS/Android | yes | +| renderNavigationTitle | 导航条标题渲染函数 | function | no | iOS/Android | yes | +| renderNavigationLeftView | 导航条左按钮渲染函数, 默认根据 this.props.showBackButton 值决定返回值, 为 true 时返回 NavigationBar.BackButton 组件实例, 否则返回 null。
注: 可以通过 Theme 修改返回按钮的默认标题。 | function | no | iOS/Android | yes | +| renderNavigationRightView | 导航条右侧按钮渲染函数 | function | no | iOS/Android | yes | +| renderNavigationBar | 导航条渲染函数 (一般应重写上面三个函数, 而不是此函数) | function | no | iOS/Android | yes | ## 遗留问题