@gaozh1024/rn-kit 0.3.2 → 0.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +106 -11
- package/TAILWIND_SETUP.md +1 -0
- package/dist/index.d.mts +23 -5
- package/dist/index.d.ts +23 -5
- package/dist/index.js +388 -363
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +350 -326
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -61,6 +61,7 @@ module.exports = {
|
|
|
61
61
|
],
|
|
62
62
|
safelist: [
|
|
63
63
|
{ pattern: /^(flex)-(1|2|3|4|5|6|7|8|9|10|11|12)$/ },
|
|
64
|
+
'flex-wrap',
|
|
64
65
|
{ pattern: /^(items)-(start|center|end|stretch)$/ },
|
|
65
66
|
{ pattern: /^(justify)-(start|center|end|between|around)$/ },
|
|
66
67
|
{ pattern: /^(p|px|py|gap)-(0|1|2|3|4|5|6|8|10|12)$/ },
|
|
@@ -171,6 +172,35 @@ import {
|
|
|
171
172
|
} from '@gaozh1024/rn-kit';
|
|
172
173
|
```
|
|
173
174
|
|
|
175
|
+
#### 布局与容器约定
|
|
176
|
+
|
|
177
|
+
- `AppView` / `Row` 支持 `wrap`,等价于 `flex-wrap`
|
|
178
|
+
- `Card` 支持常用间距快捷属性:`p` / `px` / `py` / `gap`
|
|
179
|
+
- `SafeScreen` / `AppScreen` 同时支持:
|
|
180
|
+
- `bg="primary-500"` 这类显式颜色
|
|
181
|
+
- `surface="background" | "card" | "muted"` 这类语义背景
|
|
182
|
+
|
|
183
|
+
#### Button 颜色语义
|
|
184
|
+
|
|
185
|
+
`AppButton` 目前支持以下 `color`:
|
|
186
|
+
|
|
187
|
+
- `primary`
|
|
188
|
+
- `secondary`
|
|
189
|
+
- `success`
|
|
190
|
+
- `warning`
|
|
191
|
+
- `info`
|
|
192
|
+
- `error`
|
|
193
|
+
- `danger`(`error` 的兼容别名)
|
|
194
|
+
- `muted`
|
|
195
|
+
|
|
196
|
+
```tsx
|
|
197
|
+
<AppButton color="success">保存成功</AppButton>
|
|
198
|
+
<AppButton color="warning" variant="outline">
|
|
199
|
+
继续操作
|
|
200
|
+
</AppButton>
|
|
201
|
+
<AppButton color="danger">删除</AppButton>
|
|
202
|
+
```
|
|
203
|
+
|
|
174
204
|
#### 可本地化文案参数(i18n 推荐)
|
|
175
205
|
|
|
176
206
|
- `AppList`
|
|
@@ -190,6 +220,46 @@ import {
|
|
|
190
220
|
- `yearLabel` / `monthLabel` / `dayLabel`:列标题文案
|
|
191
221
|
- `todayText` / `minDateText` / `maxDateText`:快捷按钮文案
|
|
192
222
|
|
|
223
|
+
#### 表单与反馈 Hook 当前 API
|
|
224
|
+
|
|
225
|
+
```tsx
|
|
226
|
+
import { useForm, useToast, useLoading, useAlert } from '@gaozh1024/rn-kit';
|
|
227
|
+
|
|
228
|
+
const form = useForm({
|
|
229
|
+
schema,
|
|
230
|
+
defaultValues: { name: '' },
|
|
231
|
+
});
|
|
232
|
+
|
|
233
|
+
form.values;
|
|
234
|
+
form.errors;
|
|
235
|
+
form.setValue('name', 'Panther');
|
|
236
|
+
await form.validate();
|
|
237
|
+
await form.validateField('name');
|
|
238
|
+
await form.handleSubmit(async values => {
|
|
239
|
+
console.log(values);
|
|
240
|
+
});
|
|
241
|
+
|
|
242
|
+
const toast = useToast();
|
|
243
|
+
toast.show('已保存', 'success', 2000);
|
|
244
|
+
toast.success('成功');
|
|
245
|
+
|
|
246
|
+
const loading = useLoading();
|
|
247
|
+
loading.show('加载中...');
|
|
248
|
+
loading.hide();
|
|
249
|
+
|
|
250
|
+
const alert = useAlert();
|
|
251
|
+
alert.alert({ title: '提示', message: '操作完成' });
|
|
252
|
+
alert.confirm({ title: '确认删除', message: '删除后不可恢复' });
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
说明:
|
|
256
|
+
|
|
257
|
+
- `useForm` 使用 `defaultValues`,不是 `initialValues`
|
|
258
|
+
- `useForm` 提供 `setValue` / `handleSubmit`,不是 `setFieldValue` / `submit`
|
|
259
|
+
- `useToast` 当前签名为 `show(message, type?, duration?)`
|
|
260
|
+
- `useLoading` 当前签名为 `show(text?)` / `hide()`
|
|
261
|
+
- `useAlert` 当前提供 `alert()` / `confirm()`,不包含 `prompt()` / `custom()`
|
|
262
|
+
|
|
193
263
|
### 🪝 Hooks
|
|
194
264
|
|
|
195
265
|
```tsx
|
|
@@ -317,6 +387,14 @@ import { GradientView, AppText } from '@gaozh1024/rn-kit';
|
|
|
317
387
|
</GradientView>;
|
|
318
388
|
```
|
|
319
389
|
|
|
390
|
+
TypeScript 下如果你把颜色数组先提到变量里,建议写成 tuple:
|
|
391
|
+
|
|
392
|
+
```tsx
|
|
393
|
+
const heroColors = ['#f38b32', '#fb923c'] as const;
|
|
394
|
+
|
|
395
|
+
<GradientView colors={heroColors} />;
|
|
396
|
+
```
|
|
397
|
+
|
|
320
398
|
如果你的应用是手动集成 `@gaozh1024/rn-kit`,请同时安装:
|
|
321
399
|
|
|
322
400
|
```bash
|
|
@@ -398,16 +476,31 @@ export default function App() {
|
|
|
398
476
|
|
|
399
477
|
- 亮色主题:`dark-content`
|
|
400
478
|
- 暗色主题:`light-content`
|
|
479
|
+
- 默认 `translucent={false}`
|
|
401
480
|
- Android 状态栏背景默认跟随当前主题背景色
|
|
402
481
|
|
|
403
|
-
### 2.
|
|
482
|
+
### 2. 使用 `AppHeader` 时的默认行为
|
|
483
|
+
|
|
484
|
+
如果页面使用了 `AppHeader`,通常不需要再单独处理状态栏:
|
|
485
|
+
|
|
486
|
+
- `AppHeader` 内部会自动注入 `AppFocusedStatusBar`
|
|
487
|
+
- 配置为 `translucent + backgroundColor="transparent"`
|
|
488
|
+
- 顶部状态栏区域会直接显示 Header 自身背景色
|
|
489
|
+
|
|
490
|
+
适合:
|
|
491
|
+
|
|
492
|
+
- 普通详情页
|
|
493
|
+
- 设置页
|
|
494
|
+
- 使用有色 Header 的二级页面
|
|
495
|
+
|
|
496
|
+
### 3. 页面级覆盖
|
|
404
497
|
|
|
405
498
|
如果某个页面需要单独控制状态栏,可以在页面内显式渲染:
|
|
406
499
|
|
|
407
500
|
```tsx
|
|
408
|
-
import {
|
|
501
|
+
import { AppFocusedStatusBar } from '@gaozh1024/rn-kit';
|
|
409
502
|
|
|
410
|
-
<
|
|
503
|
+
<AppFocusedStatusBar barStyle="light-content" backgroundColor="transparent" translucent />;
|
|
411
504
|
```
|
|
412
505
|
|
|
413
506
|
适合:
|
|
@@ -416,19 +509,21 @@ import { AppStatusBar } from '@gaozh1024/rn-kit';
|
|
|
416
509
|
- 沉浸式详情页
|
|
417
510
|
- 顶部大图/渐变背景页
|
|
418
511
|
|
|
419
|
-
|
|
512
|
+
对于导航页面,优先使用 `AppFocusedStatusBar`,这样只有当前聚焦页面会覆盖状态栏配置。
|
|
513
|
+
|
|
514
|
+
### 4. 登录页全屏背景示例
|
|
420
515
|
|
|
421
516
|
如果登录页希望顶部状态栏区域也和页面背景保持一致,不要直接使用默认白底容器。
|
|
422
517
|
|
|
423
518
|
推荐:
|
|
424
519
|
|
|
425
520
|
```tsx
|
|
426
|
-
import {
|
|
521
|
+
import { AppFocusedStatusBar, SafeScreen, AppView } from '@gaozh1024/rn-kit';
|
|
427
522
|
|
|
428
523
|
export function LoginScreen() {
|
|
429
524
|
return (
|
|
430
525
|
<>
|
|
431
|
-
<
|
|
526
|
+
<AppFocusedStatusBar barStyle="light-content" backgroundColor="transparent" translucent />
|
|
432
527
|
|
|
433
528
|
<SafeScreen bg="primary-500">
|
|
434
529
|
<AppView flex className="bg-primary-500">
|
|
@@ -440,15 +535,15 @@ export function LoginScreen() {
|
|
|
440
535
|
}
|
|
441
536
|
```
|
|
442
537
|
|
|
443
|
-
###
|
|
538
|
+
### 5. 沉浸式状态栏示例
|
|
444
539
|
|
|
445
540
|
```tsx
|
|
446
|
-
import {
|
|
541
|
+
import { AppFocusedStatusBar, SafeScreen, AppView } from '@gaozh1024/rn-kit';
|
|
447
542
|
|
|
448
543
|
export function HeroScreen() {
|
|
449
544
|
return (
|
|
450
545
|
<>
|
|
451
|
-
<
|
|
546
|
+
<AppFocusedStatusBar barStyle="light-content" backgroundColor="transparent" translucent />
|
|
452
547
|
|
|
453
548
|
<SafeScreen top={false} bottom={false}>
|
|
454
549
|
<AppView flex className="bg-black">
|
|
@@ -460,13 +555,13 @@ export function HeroScreen() {
|
|
|
460
555
|
}
|
|
461
556
|
```
|
|
462
557
|
|
|
463
|
-
###
|
|
558
|
+
### 6. 常见问题
|
|
464
559
|
|
|
465
560
|
#### 为什么顶部还是白色?
|
|
466
561
|
|
|
467
562
|
通常是以下原因之一:
|
|
468
563
|
|
|
469
|
-
1.
|
|
564
|
+
1. 当前页面没有使用 `AppHeader`,也没有单独覆盖 `AppFocusedStatusBar` / `AppStatusBar`
|
|
470
565
|
2. 页面容器本身是白底
|
|
471
566
|
3. 使用了 `AppScreen` / `SafeScreen`,但没有设置 `bg`
|
|
472
567
|
4. 顶部安全区没有和页面背景统一
|
package/TAILWIND_SETUP.md
CHANGED
|
@@ -40,6 +40,7 @@ module.exports = {
|
|
|
40
40
|
],
|
|
41
41
|
safelist: [
|
|
42
42
|
{ pattern: /^(flex)-(1|2|3|4|5|6|7|8|9|10|11|12)$/ },
|
|
43
|
+
'flex-wrap',
|
|
43
44
|
{ pattern: /^(items)-(start|center|end|stretch)$/ },
|
|
44
45
|
{ pattern: /^(justify)-(start|center|end|between|around)$/ },
|
|
45
46
|
{ pattern: /^(p|px|py|gap)-(0|1|2|3|4|5|6|8|10|12)$/ },
|
package/dist/index.d.mts
CHANGED
|
@@ -1073,6 +1073,8 @@ interface AppViewProps extends ViewProps {
|
|
|
1073
1073
|
flex?: boolean | number;
|
|
1074
1074
|
/** 是否使用水平排列(flex-direction: row) */
|
|
1075
1075
|
row?: boolean;
|
|
1076
|
+
/** 是否允许换行 */
|
|
1077
|
+
wrap?: boolean;
|
|
1076
1078
|
/** 是否居中显示(items-center justify-center) */
|
|
1077
1079
|
center?: boolean;
|
|
1078
1080
|
/** 是否两端对齐(justify-between) */
|
|
@@ -1128,7 +1130,7 @@ interface AppViewProps extends ViewProps {
|
|
|
1128
1130
|
* </AppView>
|
|
1129
1131
|
* ```
|
|
1130
1132
|
*/
|
|
1131
|
-
declare function AppView({ flex, row, center, between, items, justify, p, px, py, gap, bg, surface, rounded, className, children, style, ...props }: AppViewProps): react_jsx_runtime.JSX.Element;
|
|
1133
|
+
declare function AppView({ flex, row, wrap, center, between, items, justify, p, px, py, gap, bg, surface, rounded, className, children, style, ...props }: AppViewProps): react_jsx_runtime.JSX.Element;
|
|
1132
1134
|
|
|
1133
1135
|
interface AppScrollViewProps extends ScrollViewProps {
|
|
1134
1136
|
/** 是否使用 flex 布局 */
|
|
@@ -1413,6 +1415,8 @@ interface SafeScreenProps extends ViewProps {
|
|
|
1413
1415
|
right?: boolean;
|
|
1414
1416
|
/** 背景颜色 */
|
|
1415
1417
|
bg?: string;
|
|
1418
|
+
/** 语义化背景 */
|
|
1419
|
+
surface?: 'background' | 'card' | 'muted';
|
|
1416
1420
|
/** 是否使用 flex: 1 */
|
|
1417
1421
|
flex?: boolean;
|
|
1418
1422
|
/** 自定义样式类 */
|
|
@@ -1430,7 +1434,7 @@ interface SafeScreenProps extends ViewProps {
|
|
|
1430
1434
|
* </SafeScreen>
|
|
1431
1435
|
* ```
|
|
1432
1436
|
*/
|
|
1433
|
-
declare function SafeScreen({ top, bottom, left, right, bg, flex, className, children, style, ...props }: SafeScreenProps): react_jsx_runtime.JSX.Element;
|
|
1437
|
+
declare function SafeScreen({ top, bottom, left, right, bg, surface, flex, className, children, style, ...props }: SafeScreenProps): react_jsx_runtime.JSX.Element;
|
|
1434
1438
|
/**
|
|
1435
1439
|
* 页面容器组件 - 包含安全区域和基础布局
|
|
1436
1440
|
*
|
|
@@ -1461,13 +1465,14 @@ declare function SafeBottom({ children, className, ...props }: Omit<SafeScreenPr
|
|
|
1461
1465
|
/**
|
|
1462
1466
|
* AppButton 组件属性接口
|
|
1463
1467
|
*/
|
|
1468
|
+
type AppButtonColor = 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'error' | 'danger' | 'muted';
|
|
1464
1469
|
interface AppButtonProps {
|
|
1465
1470
|
/** 按钮样式变体:solid(实心)、outline(描边)、ghost(透明) */
|
|
1466
1471
|
variant?: 'solid' | 'outline' | 'ghost';
|
|
1467
1472
|
/** 按钮尺寸:sm(小)、md(中)、lg(大) */
|
|
1468
1473
|
size?: 'sm' | 'md' | 'lg';
|
|
1469
1474
|
/** 按钮颜色主题 */
|
|
1470
|
-
color?:
|
|
1475
|
+
color?: AppButtonColor;
|
|
1471
1476
|
/** 是否显示加载状态 */
|
|
1472
1477
|
loading?: boolean;
|
|
1473
1478
|
/** 是否禁用 */
|
|
@@ -1503,6 +1508,9 @@ interface AppButtonProps {
|
|
|
1503
1508
|
* // 不同颜色
|
|
1504
1509
|
* <AppButton color="primary">主题色</AppButton>
|
|
1505
1510
|
* <AppButton color="secondary">次要色</AppButton>
|
|
1511
|
+
* <AppButton color="success">成功操作</AppButton>
|
|
1512
|
+
* <AppButton color="warning">警告操作</AppButton>
|
|
1513
|
+
* <AppButton color="info">提示操作</AppButton>
|
|
1506
1514
|
* <AppButton color="danger">危险操作</AppButton>
|
|
1507
1515
|
*
|
|
1508
1516
|
* // 加载状态
|
|
@@ -1696,6 +1704,14 @@ declare function Progress({ value, max, size, color, testID, className, barClass
|
|
|
1696
1704
|
* Card 组件属性接口
|
|
1697
1705
|
*/
|
|
1698
1706
|
interface CardProps extends ViewProps {
|
|
1707
|
+
/** 内边距 */
|
|
1708
|
+
p?: number;
|
|
1709
|
+
/** 水平内边距 */
|
|
1710
|
+
px?: number;
|
|
1711
|
+
/** 垂直内边距 */
|
|
1712
|
+
py?: number;
|
|
1713
|
+
/** 子元素间距 */
|
|
1714
|
+
gap?: number;
|
|
1699
1715
|
/** Tailwind / NativeWind 类名 */
|
|
1700
1716
|
className?: string;
|
|
1701
1717
|
/** 是否禁用阴影 */
|
|
@@ -1708,7 +1724,7 @@ interface CardProps extends ViewProps {
|
|
|
1708
1724
|
/**
|
|
1709
1725
|
* Card - 卡片容器组件,支持浅色/深色主题
|
|
1710
1726
|
*/
|
|
1711
|
-
declare function Card({ children, className, style, noShadow, noBorder, noRadius, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
1727
|
+
declare function Card({ children, p, px, py, gap, className, style, noShadow, noBorder, noRadius, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
1712
1728
|
|
|
1713
1729
|
/** 图标尺寸类型 */
|
|
1714
1730
|
type IconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
@@ -2017,6 +2033,7 @@ interface AppInputProps extends Omit<TextInputProps, 'editable'> {
|
|
|
2017
2033
|
* AppInput - 输入框组件,支持浅色/深色主题
|
|
2018
2034
|
*/
|
|
2019
2035
|
declare const AppInput: React$1.ForwardRefExoticComponent<AppInputProps & React$1.RefAttributes<TextInput>>;
|
|
2036
|
+
declare const AppTextInput: React$1.ForwardRefExoticComponent<AppInputProps & React$1.RefAttributes<TextInput>>;
|
|
2020
2037
|
|
|
2021
2038
|
/**
|
|
2022
2039
|
* Checkbox 组件属性接口
|
|
@@ -2978,6 +2995,7 @@ interface AppHeaderProps {
|
|
|
2978
2995
|
* 应用头部组件
|
|
2979
2996
|
*
|
|
2980
2997
|
* iOS 风格的顶部导航栏,标题始终居中,不受左右按钮影响
|
|
2998
|
+
* 内部会自动注入聚焦态透明状态栏,让顶部状态栏区域跟随 Header 背景显示
|
|
2981
2999
|
*
|
|
2982
3000
|
* @example
|
|
2983
3001
|
* ```tsx
|
|
@@ -3584,4 +3602,4 @@ interface AlertContextType {
|
|
|
3584
3602
|
*/
|
|
3585
3603
|
declare function useAlert(): AlertContextType;
|
|
3586
3604
|
|
|
3587
|
-
export { ActionIcons, Alert, type AlertContextType, type AlertOptions, type AlertProps, type ApiBusinessErrorParser, type ApiConfig, type ApiEndpointConfig, type ApiErrorContext, type ApiErrorHandler, type ApiMethod, AppButton, type AppButtonProps, type AppError, AppFocusedStatusBar, AppHeader, type AppHeaderProps, AppImage, type AppImageProps, AppInput, type AppInputProps, AppList, type AppListProps, type AppNavigation, AppPressable, type AppPressableProps, AppProvider, type AppProviderProps, AppScreen, AppScrollView, type AppScrollViewProps, AppStatusBar, type AppStatusBarProps, AppText, type AppTextProps, AppView, type AppViewProps, BottomTabBar, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Col, type ColProps, type ColorPalette$1 as ColorPalette, type ColorToken, type CustomBottomTabBarProps, DatePicker, type DatePickerProps, DrawerContent, type DrawerContentProps, type DrawerItem, type DrawerNavigation, DrawerNavigator, type DrawerNavigatorProps, type DrawerOptions, type DrawerParamList, type DrawerRouteConfig, type DrawerScreenOptions, type DrawerScreenProps, ErrorCode, FileIcons, type FormErrors, type FormGroupOption, FormItem, type FormItemProps, GradientView, type GradientViewProps, Icon, type IconProps, type IconSize, type InfiniteFetchParams, type InfiniteFetchResult, type LinkingConfig, Loading, type LoadingContextType, type LoadingProps, type LoadingState, MemoryStorage, NavigationIcons, NavigationProvider, type NavigationProviderProps, type Orientation, OverlayProvider, type OverlayProviderProps, PageDrawer, type PageDrawerProps, type PaginationParams, type PaginationResult, type ParamListBase, type PathConfig, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RgbObject, type RouteConfig, Row, type RowProps, SafeBottom, SafeScreen, type SafeScreenProps, Select, type SelectOption, type SelectProps, Slider, type SliderProps, type StackNavigation, StackNavigator, type StackNavigatorProps, type StackParamList, type StackRouteConfig, type StackScreenOptions, type StackScreenProps, StatusIcons, Switch, type SwitchProps, type TabBarOptions, type TabNavigation, TabNavigator, type TabNavigatorProps, type TabParamList, type TabRouteConfig, type TabScreenOptions, type TabScreenProps, type Theme, type ColorPalette as ThemeColorPalette, type ThemeConfig, ThemeProvider, Toast, type ToastContextType, type ToastItem, type ToastProps, type ToastType, type UseAsyncState, type UseDimensionsReturn, type UseFormOptions, type UseInfiniteOptions, type UseInfiniteReturn, type UseKeyboardReturn, type UseOrientationReturn, type UsePageDrawerReturn, type UsePaginationOptions, type UsePaginationReturn, type UseRefreshReturn, type UseToggleActions, adjustBrightness, capitalize, clamp, cn, createAPI, createDrawerScreens, createNavigationTheme, createStackScreens, createTabScreens, createTheme, deepMerge, enhanceError, formatCurrency, formatDate, formatNumber, formatPercent, formatRelativeTime, generateColorPalette, getThemeColors, getValidationErrors, hexToRgb, isDevelopment, isValidEmail, isValidPhone, mapHttpStatus, omit, pick, rgbToHex, slugify, storage, truncate, useAlert, useAsyncState, useBackHandler, useDebounce, useDimensions, useDrawerNavigation, useForm, useInfinite, useKeyboard, useLoading, useMemoizedFn, useNavigation, useNavigationState, useOrientation, usePageDrawer, usePagination, usePrevious, useRefresh, useRequest, useRoute, useSetState, useStackNavigation, useStorage, useTabNavigation, useTheme, useThemeColors, useThrottle, useToast, useToggle, useUpdateEffect };
|
|
3605
|
+
export { ActionIcons, Alert, type AlertContextType, type AlertOptions, type AlertProps, type ApiBusinessErrorParser, type ApiConfig, type ApiEndpointConfig, type ApiErrorContext, type ApiErrorHandler, type ApiMethod, AppButton, type AppButtonProps, type AppError, AppFocusedStatusBar, AppHeader, type AppHeaderProps, AppImage, type AppImageProps, AppInput, type AppInputProps, AppList, type AppListProps, type AppNavigation, AppPressable, type AppPressableProps, AppProvider, type AppProviderProps, AppScreen, AppScrollView, type AppScrollViewProps, AppStatusBar, type AppStatusBarProps, AppText, AppTextInput, type AppTextProps, AppView, type AppViewProps, BottomTabBar, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Col, type ColProps, type ColorPalette$1 as ColorPalette, type ColorToken, type CustomBottomTabBarProps, DatePicker, type DatePickerProps, DrawerContent, type DrawerContentProps, type DrawerItem, type DrawerNavigation, DrawerNavigator, type DrawerNavigatorProps, type DrawerOptions, type DrawerParamList, type DrawerRouteConfig, type DrawerScreenOptions, type DrawerScreenProps, ErrorCode, FileIcons, type FormErrors, type FormGroupOption, FormItem, type FormItemProps, GradientView, type GradientViewProps, Icon, type IconProps, type IconSize, type InfiniteFetchParams, type InfiniteFetchResult, type LinkingConfig, Loading, type LoadingContextType, type LoadingProps, type LoadingState, MemoryStorage, NavigationIcons, NavigationProvider, type NavigationProviderProps, type Orientation, OverlayProvider, type OverlayProviderProps, PageDrawer, type PageDrawerProps, type PaginationParams, type PaginationResult, type ParamListBase, type PathConfig, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RgbObject, type RouteConfig, Row, type RowProps, SafeBottom, SafeScreen, type SafeScreenProps, Select, type SelectOption, type SelectProps, Slider, type SliderProps, type StackNavigation, StackNavigator, type StackNavigatorProps, type StackParamList, type StackRouteConfig, type StackScreenOptions, type StackScreenProps, StatusIcons, Switch, type SwitchProps, type TabBarOptions, type TabNavigation, TabNavigator, type TabNavigatorProps, type TabParamList, type TabRouteConfig, type TabScreenOptions, type TabScreenProps, type Theme, type ColorPalette as ThemeColorPalette, type ThemeConfig, ThemeProvider, Toast, type ToastContextType, type ToastItem, type ToastProps, type ToastType, type UseAsyncState, type UseDimensionsReturn, type UseFormOptions, type UseInfiniteOptions, type UseInfiniteReturn, type UseKeyboardReturn, type UseOrientationReturn, type UsePageDrawerReturn, type UsePaginationOptions, type UsePaginationReturn, type UseRefreshReturn, type UseToggleActions, adjustBrightness, capitalize, clamp, cn, createAPI, createDrawerScreens, createNavigationTheme, createStackScreens, createTabScreens, createTheme, deepMerge, enhanceError, formatCurrency, formatDate, formatNumber, formatPercent, formatRelativeTime, generateColorPalette, getThemeColors, getValidationErrors, hexToRgb, isDevelopment, isValidEmail, isValidPhone, mapHttpStatus, omit, pick, rgbToHex, slugify, storage, truncate, useAlert, useAsyncState, useBackHandler, useDebounce, useDimensions, useDrawerNavigation, useForm, useInfinite, useKeyboard, useLoading, useMemoizedFn, useNavigation, useNavigationState, useOrientation, usePageDrawer, usePagination, usePrevious, useRefresh, useRequest, useRoute, useSetState, useStackNavigation, useStorage, useTabNavigation, useTheme, useThemeColors, useThrottle, useToast, useToggle, useUpdateEffect };
|
package/dist/index.d.ts
CHANGED
|
@@ -1073,6 +1073,8 @@ interface AppViewProps extends ViewProps {
|
|
|
1073
1073
|
flex?: boolean | number;
|
|
1074
1074
|
/** 是否使用水平排列(flex-direction: row) */
|
|
1075
1075
|
row?: boolean;
|
|
1076
|
+
/** 是否允许换行 */
|
|
1077
|
+
wrap?: boolean;
|
|
1076
1078
|
/** 是否居中显示(items-center justify-center) */
|
|
1077
1079
|
center?: boolean;
|
|
1078
1080
|
/** 是否两端对齐(justify-between) */
|
|
@@ -1128,7 +1130,7 @@ interface AppViewProps extends ViewProps {
|
|
|
1128
1130
|
* </AppView>
|
|
1129
1131
|
* ```
|
|
1130
1132
|
*/
|
|
1131
|
-
declare function AppView({ flex, row, center, between, items, justify, p, px, py, gap, bg, surface, rounded, className, children, style, ...props }: AppViewProps): react_jsx_runtime.JSX.Element;
|
|
1133
|
+
declare function AppView({ flex, row, wrap, center, between, items, justify, p, px, py, gap, bg, surface, rounded, className, children, style, ...props }: AppViewProps): react_jsx_runtime.JSX.Element;
|
|
1132
1134
|
|
|
1133
1135
|
interface AppScrollViewProps extends ScrollViewProps {
|
|
1134
1136
|
/** 是否使用 flex 布局 */
|
|
@@ -1413,6 +1415,8 @@ interface SafeScreenProps extends ViewProps {
|
|
|
1413
1415
|
right?: boolean;
|
|
1414
1416
|
/** 背景颜色 */
|
|
1415
1417
|
bg?: string;
|
|
1418
|
+
/** 语义化背景 */
|
|
1419
|
+
surface?: 'background' | 'card' | 'muted';
|
|
1416
1420
|
/** 是否使用 flex: 1 */
|
|
1417
1421
|
flex?: boolean;
|
|
1418
1422
|
/** 自定义样式类 */
|
|
@@ -1430,7 +1434,7 @@ interface SafeScreenProps extends ViewProps {
|
|
|
1430
1434
|
* </SafeScreen>
|
|
1431
1435
|
* ```
|
|
1432
1436
|
*/
|
|
1433
|
-
declare function SafeScreen({ top, bottom, left, right, bg, flex, className, children, style, ...props }: SafeScreenProps): react_jsx_runtime.JSX.Element;
|
|
1437
|
+
declare function SafeScreen({ top, bottom, left, right, bg, surface, flex, className, children, style, ...props }: SafeScreenProps): react_jsx_runtime.JSX.Element;
|
|
1434
1438
|
/**
|
|
1435
1439
|
* 页面容器组件 - 包含安全区域和基础布局
|
|
1436
1440
|
*
|
|
@@ -1461,13 +1465,14 @@ declare function SafeBottom({ children, className, ...props }: Omit<SafeScreenPr
|
|
|
1461
1465
|
/**
|
|
1462
1466
|
* AppButton 组件属性接口
|
|
1463
1467
|
*/
|
|
1468
|
+
type AppButtonColor = 'primary' | 'secondary' | 'success' | 'warning' | 'info' | 'error' | 'danger' | 'muted';
|
|
1464
1469
|
interface AppButtonProps {
|
|
1465
1470
|
/** 按钮样式变体:solid(实心)、outline(描边)、ghost(透明) */
|
|
1466
1471
|
variant?: 'solid' | 'outline' | 'ghost';
|
|
1467
1472
|
/** 按钮尺寸:sm(小)、md(中)、lg(大) */
|
|
1468
1473
|
size?: 'sm' | 'md' | 'lg';
|
|
1469
1474
|
/** 按钮颜色主题 */
|
|
1470
|
-
color?:
|
|
1475
|
+
color?: AppButtonColor;
|
|
1471
1476
|
/** 是否显示加载状态 */
|
|
1472
1477
|
loading?: boolean;
|
|
1473
1478
|
/** 是否禁用 */
|
|
@@ -1503,6 +1508,9 @@ interface AppButtonProps {
|
|
|
1503
1508
|
* // 不同颜色
|
|
1504
1509
|
* <AppButton color="primary">主题色</AppButton>
|
|
1505
1510
|
* <AppButton color="secondary">次要色</AppButton>
|
|
1511
|
+
* <AppButton color="success">成功操作</AppButton>
|
|
1512
|
+
* <AppButton color="warning">警告操作</AppButton>
|
|
1513
|
+
* <AppButton color="info">提示操作</AppButton>
|
|
1506
1514
|
* <AppButton color="danger">危险操作</AppButton>
|
|
1507
1515
|
*
|
|
1508
1516
|
* // 加载状态
|
|
@@ -1696,6 +1704,14 @@ declare function Progress({ value, max, size, color, testID, className, barClass
|
|
|
1696
1704
|
* Card 组件属性接口
|
|
1697
1705
|
*/
|
|
1698
1706
|
interface CardProps extends ViewProps {
|
|
1707
|
+
/** 内边距 */
|
|
1708
|
+
p?: number;
|
|
1709
|
+
/** 水平内边距 */
|
|
1710
|
+
px?: number;
|
|
1711
|
+
/** 垂直内边距 */
|
|
1712
|
+
py?: number;
|
|
1713
|
+
/** 子元素间距 */
|
|
1714
|
+
gap?: number;
|
|
1699
1715
|
/** Tailwind / NativeWind 类名 */
|
|
1700
1716
|
className?: string;
|
|
1701
1717
|
/** 是否禁用阴影 */
|
|
@@ -1708,7 +1724,7 @@ interface CardProps extends ViewProps {
|
|
|
1708
1724
|
/**
|
|
1709
1725
|
* Card - 卡片容器组件,支持浅色/深色主题
|
|
1710
1726
|
*/
|
|
1711
|
-
declare function Card({ children, className, style, noShadow, noBorder, noRadius, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
1727
|
+
declare function Card({ children, p, px, py, gap, className, style, noShadow, noBorder, noRadius, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
1712
1728
|
|
|
1713
1729
|
/** 图标尺寸类型 */
|
|
1714
1730
|
type IconSize = number | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
@@ -2017,6 +2033,7 @@ interface AppInputProps extends Omit<TextInputProps, 'editable'> {
|
|
|
2017
2033
|
* AppInput - 输入框组件,支持浅色/深色主题
|
|
2018
2034
|
*/
|
|
2019
2035
|
declare const AppInput: React$1.ForwardRefExoticComponent<AppInputProps & React$1.RefAttributes<TextInput>>;
|
|
2036
|
+
declare const AppTextInput: React$1.ForwardRefExoticComponent<AppInputProps & React$1.RefAttributes<TextInput>>;
|
|
2020
2037
|
|
|
2021
2038
|
/**
|
|
2022
2039
|
* Checkbox 组件属性接口
|
|
@@ -2978,6 +2995,7 @@ interface AppHeaderProps {
|
|
|
2978
2995
|
* 应用头部组件
|
|
2979
2996
|
*
|
|
2980
2997
|
* iOS 风格的顶部导航栏,标题始终居中,不受左右按钮影响
|
|
2998
|
+
* 内部会自动注入聚焦态透明状态栏,让顶部状态栏区域跟随 Header 背景显示
|
|
2981
2999
|
*
|
|
2982
3000
|
* @example
|
|
2983
3001
|
* ```tsx
|
|
@@ -3584,4 +3602,4 @@ interface AlertContextType {
|
|
|
3584
3602
|
*/
|
|
3585
3603
|
declare function useAlert(): AlertContextType;
|
|
3586
3604
|
|
|
3587
|
-
export { ActionIcons, Alert, type AlertContextType, type AlertOptions, type AlertProps, type ApiBusinessErrorParser, type ApiConfig, type ApiEndpointConfig, type ApiErrorContext, type ApiErrorHandler, type ApiMethod, AppButton, type AppButtonProps, type AppError, AppFocusedStatusBar, AppHeader, type AppHeaderProps, AppImage, type AppImageProps, AppInput, type AppInputProps, AppList, type AppListProps, type AppNavigation, AppPressable, type AppPressableProps, AppProvider, type AppProviderProps, AppScreen, AppScrollView, type AppScrollViewProps, AppStatusBar, type AppStatusBarProps, AppText, type AppTextProps, AppView, type AppViewProps, BottomTabBar, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Col, type ColProps, type ColorPalette$1 as ColorPalette, type ColorToken, type CustomBottomTabBarProps, DatePicker, type DatePickerProps, DrawerContent, type DrawerContentProps, type DrawerItem, type DrawerNavigation, DrawerNavigator, type DrawerNavigatorProps, type DrawerOptions, type DrawerParamList, type DrawerRouteConfig, type DrawerScreenOptions, type DrawerScreenProps, ErrorCode, FileIcons, type FormErrors, type FormGroupOption, FormItem, type FormItemProps, GradientView, type GradientViewProps, Icon, type IconProps, type IconSize, type InfiniteFetchParams, type InfiniteFetchResult, type LinkingConfig, Loading, type LoadingContextType, type LoadingProps, type LoadingState, MemoryStorage, NavigationIcons, NavigationProvider, type NavigationProviderProps, type Orientation, OverlayProvider, type OverlayProviderProps, PageDrawer, type PageDrawerProps, type PaginationParams, type PaginationResult, type ParamListBase, type PathConfig, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RgbObject, type RouteConfig, Row, type RowProps, SafeBottom, SafeScreen, type SafeScreenProps, Select, type SelectOption, type SelectProps, Slider, type SliderProps, type StackNavigation, StackNavigator, type StackNavigatorProps, type StackParamList, type StackRouteConfig, type StackScreenOptions, type StackScreenProps, StatusIcons, Switch, type SwitchProps, type TabBarOptions, type TabNavigation, TabNavigator, type TabNavigatorProps, type TabParamList, type TabRouteConfig, type TabScreenOptions, type TabScreenProps, type Theme, type ColorPalette as ThemeColorPalette, type ThemeConfig, ThemeProvider, Toast, type ToastContextType, type ToastItem, type ToastProps, type ToastType, type UseAsyncState, type UseDimensionsReturn, type UseFormOptions, type UseInfiniteOptions, type UseInfiniteReturn, type UseKeyboardReturn, type UseOrientationReturn, type UsePageDrawerReturn, type UsePaginationOptions, type UsePaginationReturn, type UseRefreshReturn, type UseToggleActions, adjustBrightness, capitalize, clamp, cn, createAPI, createDrawerScreens, createNavigationTheme, createStackScreens, createTabScreens, createTheme, deepMerge, enhanceError, formatCurrency, formatDate, formatNumber, formatPercent, formatRelativeTime, generateColorPalette, getThemeColors, getValidationErrors, hexToRgb, isDevelopment, isValidEmail, isValidPhone, mapHttpStatus, omit, pick, rgbToHex, slugify, storage, truncate, useAlert, useAsyncState, useBackHandler, useDebounce, useDimensions, useDrawerNavigation, useForm, useInfinite, useKeyboard, useLoading, useMemoizedFn, useNavigation, useNavigationState, useOrientation, usePageDrawer, usePagination, usePrevious, useRefresh, useRequest, useRoute, useSetState, useStackNavigation, useStorage, useTabNavigation, useTheme, useThemeColors, useThrottle, useToast, useToggle, useUpdateEffect };
|
|
3605
|
+
export { ActionIcons, Alert, type AlertContextType, type AlertOptions, type AlertProps, type ApiBusinessErrorParser, type ApiConfig, type ApiEndpointConfig, type ApiErrorContext, type ApiErrorHandler, type ApiMethod, AppButton, type AppButtonProps, type AppError, AppFocusedStatusBar, AppHeader, type AppHeaderProps, AppImage, type AppImageProps, AppInput, type AppInputProps, AppList, type AppListProps, type AppNavigation, AppPressable, type AppPressableProps, AppProvider, type AppProviderProps, AppScreen, AppScrollView, type AppScrollViewProps, AppStatusBar, type AppStatusBarProps, AppText, AppTextInput, type AppTextProps, AppView, type AppViewProps, BottomTabBar, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Col, type ColProps, type ColorPalette$1 as ColorPalette, type ColorToken, type CustomBottomTabBarProps, DatePicker, type DatePickerProps, DrawerContent, type DrawerContentProps, type DrawerItem, type DrawerNavigation, DrawerNavigator, type DrawerNavigatorProps, type DrawerOptions, type DrawerParamList, type DrawerRouteConfig, type DrawerScreenOptions, type DrawerScreenProps, ErrorCode, FileIcons, type FormErrors, type FormGroupOption, FormItem, type FormItemProps, GradientView, type GradientViewProps, Icon, type IconProps, type IconSize, type InfiniteFetchParams, type InfiniteFetchResult, type LinkingConfig, Loading, type LoadingContextType, type LoadingProps, type LoadingState, MemoryStorage, NavigationIcons, NavigationProvider, type NavigationProviderProps, type Orientation, OverlayProvider, type OverlayProviderProps, PageDrawer, type PageDrawerProps, type PaginationParams, type PaginationResult, type ParamListBase, type PathConfig, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, type RgbObject, type RouteConfig, Row, type RowProps, SafeBottom, SafeScreen, type SafeScreenProps, Select, type SelectOption, type SelectProps, Slider, type SliderProps, type StackNavigation, StackNavigator, type StackNavigatorProps, type StackParamList, type StackRouteConfig, type StackScreenOptions, type StackScreenProps, StatusIcons, Switch, type SwitchProps, type TabBarOptions, type TabNavigation, TabNavigator, type TabNavigatorProps, type TabParamList, type TabRouteConfig, type TabScreenOptions, type TabScreenProps, type Theme, type ColorPalette as ThemeColorPalette, type ThemeConfig, ThemeProvider, Toast, type ToastContextType, type ToastItem, type ToastProps, type ToastType, type UseAsyncState, type UseDimensionsReturn, type UseFormOptions, type UseInfiniteOptions, type UseInfiniteReturn, type UseKeyboardReturn, type UseOrientationReturn, type UsePageDrawerReturn, type UsePaginationOptions, type UsePaginationReturn, type UseRefreshReturn, type UseToggleActions, adjustBrightness, capitalize, clamp, cn, createAPI, createDrawerScreens, createNavigationTheme, createStackScreens, createTabScreens, createTheme, deepMerge, enhanceError, formatCurrency, formatDate, formatNumber, formatPercent, formatRelativeTime, generateColorPalette, getThemeColors, getValidationErrors, hexToRgb, isDevelopment, isValidEmail, isValidPhone, mapHttpStatus, omit, pick, rgbToHex, slugify, storage, truncate, useAlert, useAsyncState, useBackHandler, useDebounce, useDimensions, useDrawerNavigation, useForm, useInfinite, useKeyboard, useLoading, useMemoizedFn, useNavigation, useNavigationState, useOrientation, usePageDrawer, usePagination, usePrevious, useRefresh, useRequest, useRoute, useSetState, useStackNavigation, useStorage, useTabNavigation, useTheme, useThemeColors, useThrottle, useToast, useToggle, useUpdateEffect };
|