@zhenryx/react-native-components 0.0.3 → 0.1.1

package/README.md

@@ -1,16 +1,37 @@
-# @zhenryx/react-native-ui
-一个 React Native UI 组件库
-该组件库以避免以下情况出现：
-- 部分安卓机型吞字
+# @zhenryx/react-native-components
+
+一个 React Native UI 组件库。
+
 ## 安装
 
 ```bash
-npm install @zhenryx/react-native-ui
+npm install @zhenryx/react-native-components
 ```
 
 ## 要求
-- React >= 18.1.0
-- React Native >= 0.70.0
 
-## 许可证
-ISC
+- React >= 16.8.0
+- React Native >= 0.60.0
+- react-native-safe-area-context >= 3.0.0
+
+## 快速开始
+
+```bash
+npm install react-native-safe-area-context
+```
+
+```tsx
+import { ThemeProvider } from '@zhenryx/react-native-components';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+## 文档
+
+详细的组件文档请查看 [src/docs](./src/docs) 目录。

package/dist/Header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAW,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAQ,SAAS,EAAE,SAAS,EAAE,SAAS,EAAgC,MAAM,cAAc,CAAA;AAKlG,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwDxC,CAAA"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAW,SAAS,EAAE,MAAM,OAAO,CAAA;AACjD,OAAO,EAAQ,SAAS,EAAE,SAAS,EAAE,SAAS,EAAgC,MAAM,cAAc,CAAA;AAIlG,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAsDxC,CAAA"}

package/dist/Header/Header.js

@@ -26,21 +26,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Header = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 const Text_1 = require("../Text/Text");
 const ThemeConfig_1 = require("../ThemeConfig/ThemeConfig");
 const Header = ({ title = '自定义头部导航', backGroundColor, leftComponent, centerComponent, rightComponent, containerStyle, titleStyle: customTitleStyle, showBack = true, onBack }) => {
     const { theme } = (0, ThemeConfig_1.useTheme)();
-    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
     const headerStyle = (0, react_1.useMemo)(() => ({
-        height: (theme['$header-height'] || 44) + insets.top,
-        paddingTop: insets.top,
+        minHeight: theme['$header-height'] || 44,
         backgroundColor: backGroundColor || theme['$header-background'] || 'transparent',
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
         paddingHorizontal: theme['$header-spacing'] || 15,
-    }), [theme, backGroundColor, insets.top]);
+    }), [theme, backGroundColor]);
     const defaultTitleStyle = (0, react_1.useMemo)(() => ({
         fontSize: theme['$header-title-fontsize'] || 18,
         fontWeight: theme['$header-title-fontweight'] || '500'

package/dist/TabView/TabView.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+export interface Tab {
+    id: string;
+    label: string;
+    content?: ReactNode;
+}
+export interface TabViewProps {
+    tabs: Tab[];
+    defaultTab?: string;
+    onTabChange?: (tabId: string) => void;
+    renderContent?: (tab: Tab) => ReactNode;
+}
+export declare const TabView: React.FC<TabViewProps>;
+//# sourceMappingURL=TabView.d.ts.map

package/dist/TabView/TabView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabView.d.ts","sourceRoot":"","sources":["../../src/components/TabView/TabView.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AAG9D,MAAM,WAAW,GAAG;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,SAAS,CAAC;CACzC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoE1C,CAAC"}

package/dist/TabView/TabView.js

@@ -0,0 +1,120 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabView = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const TabView = ({ tabs, defaultTab, onTabChange, renderContent, }) => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(defaultTab || tabs[0]?.id || '');
+    // 当 defaultTab 或 tabs 变化时，更新 activeTab
+    (0, react_1.useEffect)(() => {
+        if (defaultTab && tabs.some((tab) => tab.id === defaultTab)) {
+            setActiveTab(defaultTab);
+        }
+        else if (tabs.length > 0) {
+            setActiveTab((currentTab) => {
+                // 如果当前 tab 不在 tabs 中，回退到第一个 tab
+                if (!tabs.some((tab) => tab.id === currentTab)) {
+                    return tabs[0].id;
+                }
+                return currentTab;
+            });
+        }
+    }, [defaultTab, tabs]);
+    const handleTabPress = (tabId) => {
+        setActiveTab(tabId);
+        onTabChange?.(tabId);
+    };
+    const activeTabData = tabs.find((tab) => tab.id === activeTab) || tabs[0];
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.View style={styles.tabContainer}>
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          {tabs.map((tab) => (<react_native_1.Pressable key={tab.id} style={styles.tab} onPress={() => handleTabPress(tab.id)}>
+              <react_native_1.Text style={[
+                styles.tabText,
+                activeTab === tab.id && styles.tabTextActive,
+            ]}>
+                {tab.label}
+              </react_native_1.Text>
+              {activeTab === tab.id && <react_native_1.View style={styles.tabIndicator}/>}
+            </react_native_1.Pressable>))}
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      <react_native_1.View style={styles.contentContainer}>
+        {activeTabData
+            ? renderContent
+                ? renderContent(activeTabData)
+                : activeTabData.content || null
+            : null}
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.TabView = TabView;
+exports.TabView.displayName = 'TabView';
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#FFFFFF',
+    },
+    tabContainer: {
+        borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderBottomColor: '#E5E7EB',
+        backgroundColor: '#FFFFFF',
+    },
+    tab: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 20,
+        position: 'relative',
+        minWidth: 70,
+    },
+    tabText: {
+        fontSize: 15,
+        color: '#9CA3AF',
+        fontWeight: '500',
+        textAlign: 'center',
+    },
+    tabTextActive: {
+        color: '#111827',
+        fontWeight: '700',
+        fontSize: 16,
+        transform: [{ scale: 1.1 }],
+    },
+    tabIndicator: {
+        position: 'absolute',
+        bottom: 0,
+        alignSelf: 'center',
+        width: 25,
+        height: 3,
+        backgroundColor: '#EF4444',
+        borderRadius: 2,
+    },
+    contentContainer: {
+        flex: 1,
+        padding: 20,
+    },
+});

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export type { OverLayProps } from './Overlay/Overlay';
 export { Popup } from './Popup/Popup';
 export type { PopupProps } from './Popup/Popup';
 export { Text } from './Text/Text';
+export { TabView } from './TabView/TabView';
+export type { TabViewProps, Tab } from './TabView/TabView';
 export { ThemeProvider, useTheme } from './ThemeConfig/ThemeConfig';
 export type { Theme } from './ThemeConfig/ThemeConfig';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACpE,YAAY,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/components/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAEnC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACpE,YAAY,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTheme = exports.ThemeProvider = exports.Text = exports.Popup = exports.OverLay = exports.Header = exports.Empty = exports.Dialog = exports.Button = void 0;
+exports.useTheme = exports.ThemeProvider = exports.TabView = exports.Text = exports.Popup = exports.OverLay = exports.Header = exports.Empty = exports.Dialog = exports.Button = void 0;
 var Button_1 = require("./Button/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
 var Dialog_1 = require("./Dialog/Dialog");
@@ -15,6 +15,8 @@ var Popup_1 = require("./Popup/Popup");
 Object.defineProperty(exports, "Popup", { enumerable: true, get: function () { return Popup_1.Popup; } });
 var Text_1 = require("./Text/Text");
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
+var TabView_1 = require("./TabView/TabView");
+Object.defineProperty(exports, "TabView", { enumerable: true, get: function () { return TabView_1.TabView; } });
 var ThemeConfig_1 = require("./ThemeConfig/ThemeConfig");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeConfig_1.ThemeProvider; } });
 Object.defineProperty(exports, "useTheme", { enumerable: true, get: function () { return ThemeConfig_1.useTheme; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenryx/react-native-components",
-  "version": "0.0.3",
+  "version": "0.1.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -25,14 +25,12 @@
     "access": "public"
   },
   "devDependencies": {
-    "@types/react": "18.2.0",
-    "@types/react-native": "0.70.0",
-    "typescript": "5.0.4",
-    "react-native-safe-area-context": "^4.8.0"
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.60.0",
+    "typescript": "^4.0.0"
   },
   "peerDependencies": {
-    "react": ">=18.1.0",
-    "react-native": ">=0.70.0",
-    "react-native-safe-area-context": ">=4.0.0"
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
   }
 }