{"id":21246974,"url":"https://github.com/maolion/mao-rn-android-kit","last_synced_at":"2025-07-10T22:31:53.057Z","repository":{"id":57291141,"uuid":"62895258","full_name":"maolion/mao-rn-android-kit","owner":"maolion","description":"⚙️ Android Native (ui components and modules) wrap in React Native","archived":false,"fork":false,"pushed_at":"2017-04-14T14:28:20.000Z","size":19187,"stargazers_count":72,"open_issues_count":3,"forks_count":11,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-08-09T09:41:11.908Z","etag":null,"topics":["appbarlayout","collapsingtollbarlayout","component","coordinatorlayout","design-support","dimensions","gravity","nestedscrollview","popup-window","react-native","scrollview","tablayout","typescript"],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maolion.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-08T14:38:01.000Z","updated_at":"2023-03-02T20:19:07.000Z","dependencies_parsed_at":"2022-09-01T14:01:07.378Z","dependency_job_id":null,"html_url":"https://github.com/maolion/mao-rn-android-kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maolion%2Fmao-rn-android-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maolion%2Fmao-rn-android-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maolion%2Fmao-rn-android-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maolion%2Fmao-rn-android-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maolion","download_url":"https://codeload.github.com/maolion/mao-rn-android-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225658516,"owners_count":17503666,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["appbarlayout","collapsingtollbarlayout","component","coordinatorlayout","design-support","dimensions","gravity","nestedscrollview","popup-window","react-native","scrollview","tablayout","typescript"],"created_at":"2024-11-21T02:11:28.966Z","updated_at":"2024-11-21T02:11:29.467Z","avatar_url":"https://github.com/maolion.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM Package](https://badge.fury.io/js/mao-rn-android-kit.svg)](https://www.npmjs.com/package/mao-rn-android-kit)\n# mao-rn-android-kit\n\n为 React Native 开发 提供的一些Android原生模块/组件\n\n![examples](./examples.png)\n\n----\n\n包含组件\n\n- CoordinatorLayout\n- AppBarLayout\n- CollapsingTollbarLayout\n- TabLayout\n- NestedScrollView\n- PopupWindow\n\n包含模块\n\n- ExtraDimensions\n- Gravity\n\n-----\n\n## 安装\n\n#### 第一步、执行 ```npm install mao-rn-android-kit --save``` 安装 该npm包\n\n#### 第二步、配置你项目中的 ```android/settings.gradle``` 文件\n```\n....\n\ninclude ':mao-rn-android-kit'\nproject(':mao-rn-android-kit').projectDir = new File(settingsDir, '../node_modules/mao-rn-android-kit/android')\n\n```\n\n#### 第三步、配置你项目中的 ```android/app/build.gradle``` 文件\n```\n...\ndependencies {\n    ...\n    compile project(':mao-rn-android-kit') // \u003c-- 加入这条\n}\n```\n\n#### 第四步、在你项目的 android 源码中注册该模块\n\n最新版的目标文件地址是 ```android/app/src/main/your.domain/MainApplication.java```\n\nv27版本的目标文件地址是 ```android/app/src/main/your.domain/MainActive.java```\n\n```\n...\n\nimport com.maornandroidkit.KitsPackage; // \u003c-- 导入模块\n\n...\n\n    @Override\n    protected List\u003cReactPackage\u003e getPackages() {\n        return Arrays.\u003cReactPackage\u003easList(\n            ...\n            new KitsPackage() // \u003c--- 将 LibsPackage 实例 添加在这\n        );\n    }\n...\n\n```\n\n#### 第五步、在项目中使用\n\n```\nimport {\n    CoordinatorLayoutAndroid,\n    AppBarLayoutAndroid,\n    TabLayoutAndroid,\n    NestedScrollViewAndroid,\n    ExtraDimensionsAndroid,\n    PopupWindowAndroid\n} from 'mao-rn-android-kit';\n\n\n// 详细请看 源码中的 example/index.android.js 使用例子\n\n```\n\n------\n\n## 查看Demo\n\ndemo 位于 ```example/``` 目录下\n\n```\n# \u003e mao-rn-android-kit/\n$ cd example/\n$ npm install\n$ react-native run-android\n```\n-----\n\n## API\n\n### CoordinatorLayoutAndroid\n\n属性\n```\nlayoutParams: {\n    width: number | \"match_parent\" | \"wrap_content\"\n    height: number | \"match_parent\" | \"wrap_content\"\n}\n\nfitsSystemWindows: boolean;\n```\n\n方法\n```\n/**\n * 设置目标元素 app:layout_behavior 为  AppBarLayout.ScrollingViewBehavior\n * @param {Component} view 目标视图, 必须是 NestedScrollView 或 RecyclerView， 或者这两者的父容器\n */\nsetScrollingViewBehavior(view: Component);\n\n/**\n * 将CoordinatorLayout 控制的AppBarLayout 伸缩效果重置到初始位置\n * @param {AppBarLayout} appbar\n * @param {boolean} nestedScrollEnabled 控制 CoordinatorLayout 是否响应 scrollview 滚动, 默认是true\n * @param {boolean} smoothly 是否开启平滑滚动的动画效果，默认不开启\n */\nresetBehavior(appbar: AppBarLayout, nestedScrollEnabled, smoothly: boolean);\n\n```\n----\n\n### AppBarLayoutAndroid\n\n常量\n```\n// 以下常量配合 scrollFlag属性用\nAppBarLayoutAndroid.SCROLL_FLAG_ENTRY_ALWAYS\nAppBarLayoutAndroid.SCROLL_FLAG_ENTRY_ALWAYS_COLLAPSED\nAppBarLayoutAndroid.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED\nAppBarLayoutAndroid.SCROLL_FLAG_SCROLL\nAppBarLayoutAndroid.SCROLL_FLAG_SNAP\n\n```\n\n属性\n```\nlayoutParams: {\n    width: number | \"match_parent\" | \"wrap_content\"\n    height: number | \"match_parent\" | \"wrap_content\"\n    scrollFlag: number\n}\n\nfitsSystemWindows: boolean;\n```\n\n----\n\n### TabLayoutAndroid\n\n属性\n```\n//选项卡项目\ntabs: { text: string }[];\n\n//选项卡字体大小\ntabTextSize: number;\n\n//选项卡项目默认字体颜色\ntabTextColor: string;\n\n//选项卡项目选中字体颜色\ntabSelectedTextColor: string;\n\n//选项卡下标线颜色\ntabIndicatorColor: string;\n\n//选项卡下标线高度\ntabIndicatorHeight: number;\n\n//选项卡项目布局模式\ntabMode: \"scrollale\" | \"fixed\";\n\n//选卡布局位置\ntabGravity: \"center\" | \"fill\";\n\n//选项卡高度\ntabHeight: number;\n\n//选项卡侧边(左右边)边距\ntabSidePadding: number;\n\n```\n\n方法\n```\n/**\n * 绑定 viewPager\n * @param {ViewPagerAndroid} viewPager\n *  绑定的viewPager组件\n * @param {{text: string}[]} tabs\n *  设置选项卡项目\n * @param {boolean} smoothScroll\n *  从选项卡被选中后触发viewPager的同步切换时 是否开启平滑滚动的动画效果，默认开启\n */\nsetViewPager(viewPager: ViewPagerAndroid, tabs: {text: string}[], smoothScroll: boolean);\n\n/**\n * 设置 宽高尺寸, 使用 TabLayout的 Layoutparams 修改这些尺寸信息\n * @param {number | \"wrap_content\" | \"match_parent\"} width\n * @param {number | \"wrap_content\" | \"match_parent\"} height\n */\nsetViewSize(width: number | \"wrap_content\" | \"match_parent\", height?: number | \"wrap_content\" | \"match_parent\");\n```\n\n----\n\n### NestedScrollViewAndroid\n\n属性, 继承 ScrollView 的属性\n```\n...\n\n//显示水平轴滚动标记\nshowVerticalScrollIndicator: boolean;\n```\n\n方法, 继承 ScrollView的方法\n```\n\n```\n\n----\n\n### ExtraDimensionsAndroid\n\n方法\n```\n/**\n * 获取设备实际屏幕高度\n * @return {boolean}\n */\ngetScreenHeight(): number;\n\n/**\n * 获取设备实际屏幕宽度\n * @return {boolean}\n */\ngetScreenWidth(): number;\n\n/**\n * 获取魅族SmartBar高度\n * @return {boolean}\n */\ngetSmartBarHeight(): number;\n\n/**\n * 获取软键盘导航按钮高度\n * @return {boolean}\n */\ngetSoftMenuBarHeight(): number;\n\n/**\n * 获取状态栏高度\n * @return {boolean}\n */\ngetStatusBarHeight(): number;\n\n/**\n * 获取APP可视容器宽度\n * @return {boolean}\n */\ngetAppClientWidth(): number;\n\n/**\n * 获取APP可视容器高度\n * @return {boolean}\n */\ngetAppClientHeight(): number;\n```\n----\n\n### PopupWindowAndroid\n\n方法\n```\n/**\n * 将弹出窗口显示在目标视图元素下方\n * @param {Component}  view\n *  目标视图元素\n * @param {number} x\n *  x轴偏移\n * @param {number} y\n *  y轴偏移\n */\nshowAsDropdown(view: Component, x: number, y: number): void;\n\n/**\n * 将弹出窗口显示在指定位置\n * @param {number} gravity\n *  详细值参考 [Gravity](https://developer.android.com/reference/android/view/Gravity.html)\n * @param {number} x\n *  x轴偏移\n * @param {number} y\n *  y轴偏移\n */\nshowAsLocation(gravity: number, x: number, y: number): void;\n\n/**\n * 隐藏弹出层窗口\n */\nhide(): void;\n```\n\n属性\n```\n// focusable\nfocusable?: boolea;\n\n// 弹出窗口内是否接收触摸事件\ntouchable?: boolea;\n\n// 点击弹出窗口外时 是否隐藏弹出窗口\noutsideTouchable?: boolean;\n```\n\n----\n\n### CollapsToolbarLayout\n\n方法\n\n```\n\n```\n\n属性\n```\n// 遮罩颜色\ncontentScrimColor: string(color value);\n\n// toolbar 标题 在 CollapseToolBarLayout 收起时显示位置\ncollapsedTitleGravity: number;\n\n// toolbar 标题 在 CollapseToolBarLayout 收起时显示的字体颜色\ncollapsedTitleColor: string(color value);\n\n// toolbar 标题 在 CollapseToolBarLayout 展开时显示的字体颜色\nexpandedTitleColor: string(color value);\n\n// toolbar 标题 在 CollapseToolBarLayout 展开时显示位置\nexpandedTitleGravity: number(Gravity);\n\n// toolbar 标题 在 CollapseToolBarLayout 展开时 外边距控制\nexpandedTitleMargin: number[];\n\n// toolbar 标题 在 CollapseToolBarLayout 展开时 外左边距控制\nexpandedTitleMarginStart: number;\n\n// toolbar 标题 在 CollapseToolBarLayout 展开时 外上边距控制\nexpandedTitleMarginTop: number;\n\n// toolbar 标题 在 CollapseToolBarLayout 展开时 外右边距控制\nexpandedTitleMarginEnd: number;\n\n// toolbar 标题 在 CollapseToolBarLayout 展开时 外下边距控制\nexpandedTitleMarginBottom: number;\n\n// 遮罩过度动画持续时间(ms)\nscrimAnimationDuration: number;\n\n// 设置收起多少高度时,显示遮罩的内容\nscrimVisibleHeightTrigger: number;\n\n// 是否显示遮罩\nscrimsShown: boolean;\n\n// 是否显示遮罩动画\nscrimsShownAnimate: boolean;\n\n// 状态栏遮罩颜色\nstatusBarScrimColor: string;\n\n// 标题\ntitle: string;\n\n// 启用标题开关\ntitleEnable: boolean;\n```\n----\n\n### GravityAndroid\n\n[Gravity](https://developer.android.com/reference/android/view/Gravity.html)\n\n参考过:\n\n- [react-native-android-design-support](https://github.com/Neson/react-native-android-design-support)\n- [react-native-extra-dimensions-android](https://github.com/BelinChung/react-native-extra-dimensions-android)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaolion%2Fmao-rn-android-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaolion%2Fmao-rn-android-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaolion%2Fmao-rn-android-kit/lists"}