@zhenryx/react-native-components 0.1.0 → 0.1.2

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

@@ -4,8 +4,11 @@ export interface HeaderProps {
     title?: string;
     backGroundColor?: string;
     leftComponent?: ReactNode;
+    leftComponentStyle?: StyleProp<ViewStyle>;
     centerComponent?: ReactNode;
+    centerComponentStyle?: StyleProp<ViewStyle>;
     rightComponent?: ReactNode;
+    rightComponentStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
     titleStyle?: StyleProp<TextStyle>;
     showBack?: boolean;

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,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC1C,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5C,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC3C,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,CAyDxC,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 Header = ({ title = '自定义头部导航', backGroundColor, leftComponent, leftComponentStyle, centerComponent, centerComponentStyle, rightComponent, rightComponentStyle, 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'
@@ -60,13 +57,13 @@ const Header = ({ title = '自定义头部导航', backGroundColor, leftComponen
         return <Text_1.Text style={[defaultTitleStyle, customTitleStyle]}>{title}</Text_1.Text>;
     };
     return (<react_native_1.View style={[headerStyle, containerStyle]}>
-      <react_native_1.View style={styles.leftContainer}>
+      <react_native_1.View style={[styles.leftContainer, leftComponentStyle]}>
         {renderLeft()}
       </react_native_1.View>
-      <react_native_1.View style={styles.centerContainer}>
+      <react_native_1.View style={[styles.centerContainer, centerComponentStyle]}>
         {renderCenter()}
       </react_native_1.View>
-      <react_native_1.View style={styles.rightContainer}>
+      <react_native_1.View style={[styles.rightContainer, rightComponentStyle]}>
         {rightComponent}
       </react_native_1.View>
     </react_native_1.View>);
@@ -83,6 +80,8 @@ const styles = react_native_1.StyleSheet.create({
     },
     rightContainer: {
         flex: 1,
+        justifyContent: 'flex-end',
+        flexDirection: 'row',
     },
     icon_return: {
         width: 18,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenryx/react-native-components",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "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"
   }
 }