repository·master·Indexed 25 days ago
https://github.com/ant-design/ant-design-mobile-rnA configurable Mobile UI specification and React-based implementation for React Native based on Ant Design Mobile UI standards. The library supports both web and native usages and provides a comprehensive set of components including Form, Input, Collapse, and Toast, as well as hooks like useToast and useModal. Version 5.4.0 and later requires a minimum react-native version of 0.67.5.
Stepper component is used to increase or decrease a numerical value. It is ideal for scenarios requiring small adjustments to values, such as changing an annualized yield from 4.00% to 4.05%.The InputItem component is used for single-line text entry. It supports keyboard and clipboard input, cursor movement, and specialized formatting like password masking.
Important: InputItem must be wrapped in a List component to function correctly.
Note: This component is marked as
ARCHIVE(version5.2.1and later). It is recommended to use the Input component instead.
The Accordion component is used to group and hide complex content areas. Typically, only one content area is allowed to be expanded at a time, though multiple areas can be expanded in special cases.
Note: Nested usage of Accordion.Panel is currently not supported.
Stepper component allows users to increase or decrease a value step by step. It is ideal for making small, precise adjustments to numerical values (e.g., adjusting an annual return rate).You can preview the Ant Design Mobile RN components in several ways:
Picker component allows users to select from a preset set of data (e.g., province/city/district selection). It is recommended to use Picker instead of keyboard input to improve user experience. Note that DatePicker is a specialized mode of the Picker component.NoticeBar is used for system reminders or activity notifications, typically placed below the navigation bar. It is intended for notifications that require user attention but are less critical than a Modal and more critical than a Toast. It can also be used to implement a lightweight marquee (scrolling text) effect.Slider component allows users to select a specific value or a range of values (e.g., for brightness control). By default, it is positioned horizontally. When the range prop is set to true, the component returns values as an array [number, number]; otherwise, it returns a single number.Input.TextArea component is used for multi-line text input. It inherits all props from Input and adds support for auto-sizing height and fixed row counts.DatePicker component is used to select a date or time. It is accurate up to the second. It supports various precision levels and allows for filtering available dates.The Popover component displays a floating menu or bubble after clicking a control or a specific area.
Note: This component is marked as ARCHIVE since version 5.2.1. It is recommended to use the Tooltip component instead for newer projects.
Ant Design Mobile RN utilizes a 'Headless UI' pattern for certain components (like Slider) to provide greater flexibility than traditional prop-based styling.
Key Advantages:
styles object to a parent component, each sub-element (Track, Range, Thumb) can be styled independently using style or className. This makes it compatible with tools like Tailwind CSS or animation libraries.<Slider.Thumb />) rather than toggling a boolean prop.<View> containing text) directly into the component tree (e.g., inside the <Slider.Track>), which is not possible with the standard prop-based API.