为 React Native 开发 提供的一些Android原生模块/组件
包含组件
- CoordinatorLayout
- AppBarLayout
- CollapsingTollbarLayout
- TabLayout
- NestedScrollView
- PopupWindow
包含模块
- ExtraDimensions
- Gravity
....
include ':mao-rn-android-kit'
project(':mao-rn-android-kit').projectDir = new File(settingsDir, '../node_modules/mao-rn-android-kit/android')
...
dependencies {
...
compile project(':mao-rn-android-kit') // <-- 加入这条
}
最新版的目标文件地址是 android/app/src/main/your.domain/MainApplication.java
v27版本的目标文件地址是 android/app/src/main/your.domain/MainActive.java
...
import com.maornandroidkit.KitsPackage; // <-- 导入模块
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
...
new KitsPackage() // <--- 将 LibsPackage 实例 添加在这
);
}
...
import {
CoordinatorLayoutAndroid,
AppBarLayoutAndroid,
TabLayoutAndroid,
NestedScrollViewAndroid,
ExtraDimensionsAndroid,
PopupWindowAndroid
} from 'mao-rn-android-kit';
// 详细请看 源码中的 example/index.android.js 使用例子
demo 位于 example/ 目录下
# > mao-rn-android-kit/
$ cd example/
$ npm install
$ react-native run-android
属性
layoutParams: {
width: number | "match_parent" | "wrap_content"
height: number | "match_parent" | "wrap_content"
}
fitsSystemWindows: boolean;
方法
/**
* 设置目标元素 app:layout_behavior 为 AppBarLayout.ScrollingViewBehavior
* @param {Component} view 目标视图, 必须是 NestedScrollView 或 RecyclerView， 或者这两者的父容器
*/
setScrollingViewBehavior(view: Component);
/**
* 将CoordinatorLayout 控制的AppBarLayout 伸缩效果重置到初始位置
* @param {AppBarLayout} appbar
* @param {boolean} nestedScrollEnabled 控制 CoordinatorLayout 是否响应 scrollview 滚动, 默认是true
* @param {boolean} smoothly 是否开启平滑滚动的动画效果，默认不开启
*/
resetBehavior(appbar: AppBarLayout, nestedScrollEnabled, smoothly: boolean);
常量
// 以下常量配合 scrollFlag属性用
AppBarLayoutAndroid.SCROLL_FLAG_ENTRY_ALWAYS
AppBarLayoutAndroid.SCROLL_FLAG_ENTRY_ALWAYS_COLLAPSED
AppBarLayoutAndroid.SCROLL_FLAG_EXIT_UNTIL_COLLAPSED
AppBarLayoutAndroid.SCROLL_FLAG_SCROLL
AppBarLayoutAndroid.SCROLL_FLAG_SNAP
属性
layoutParams: {
width: number | "match_parent" | "wrap_content"
height: number | "match_parent" | "wrap_content"
scrollFlag: number
}
fitsSystemWindows: boolean;
属性
//选项卡项目
tabs: { text: string }[];
//选项卡字体大小
tabTextSize: number;
//选项卡项目默认字体颜色
tabTextColor: string;
//选项卡项目选中字体颜色
tabSelectedTextColor: string;
//选项卡下标线颜色
tabIndicatorColor: string;
//选项卡下标线高度
tabIndicatorHeight: number;
//选项卡项目布局模式
tabMode: "scrollale" | "fixed";
//选卡布局位置
tabGravity: "center" | "fill";
//选项卡高度
tabHeight: number;
//选项卡侧边(左右边)边距
tabSidePadding: number;
方法
/**
* 绑定 viewPager
* @param {ViewPagerAndroid} viewPager
* 绑定的viewPager组件
* @param {{text: string}[]} tabs
* 设置选项卡项目
* @param {boolean} smoothScroll
* 从选项卡被选中后触发viewPager的同步切换时 是否开启平滑滚动的动画效果，默认开启
*/
setViewPager(viewPager: ViewPagerAndroid, tabs: {text: string}[], smoothScroll: boolean);
/**
* 设置 宽高尺寸, 使用 TabLayout的 Layoutparams 修改这些尺寸信息
* @param {number | "wrap_content" | "match_parent"} width
* @param {number | "wrap_content" | "match_parent"} height
*/
setViewSize(width: number | "wrap_content" | "match_parent", height?: number | "wrap_content" | "match_parent");
属性, 继承 ScrollView 的属性
...
//显示水平轴滚动标记
showVerticalScrollIndicator: boolean;
方法, 继承 ScrollView的方法
方法
/**
* 获取设备实际屏幕高度
* @return {boolean}
*/
getScreenHeight(): number;
/**
* 获取设备实际屏幕宽度
* @return {boolean}
*/
getScreenWidth(): number;
/**
* 获取魅族SmartBar高度
* @return {boolean}
*/
getSmartBarHeight(): number;
/**
* 获取软键盘导航按钮高度
* @return {boolean}
*/
getSoftMenuBarHeight(): number;
/**
* 获取状态栏高度
* @return {boolean}
*/
getStatusBarHeight(): number;
/**
* 获取APP可视容器宽度
* @return {boolean}
*/
getAppClientWidth(): number;
/**
* 获取APP可视容器高度
* @return {boolean}
*/
getAppClientHeight(): number;
方法
/**
* 将弹出窗口显示在目标视图元素下方
* @param {Component} view
* 目标视图元素
* @param {number} x
* x轴偏移
* @param {number} y
* y轴偏移
*/
showAsDropdown(view: Component, x: number, y: number): void;
/**
* 将弹出窗口显示在指定位置
* @param {number} gravity
* 详细值参考 [Gravity](https://developer.android.com/reference/android/view/Gravity.html)
* @param {number} x
* x轴偏移
* @param {number} y
* y轴偏移
*/
showAsLocation(gravity: number, x: number, y: number): void;
/**
* 隐藏弹出层窗口
*/
hide(): void;
属性
// focusable
focusable?: boolea;
// 弹出窗口内是否接收触摸事件
touchable?: boolea;
// 点击弹出窗口外时 是否隐藏弹出窗口
outsideTouchable?: boolean;
方法
属性
// 遮罩颜色
contentScrimColor: string(color value);
// toolbar 标题 在 CollapseToolBarLayout 收起时显示位置
collapsedTitleGravity: number;
// toolbar 标题 在 CollapseToolBarLayout 收起时显示的字体颜色
collapsedTitleColor: string(color value);
// toolbar 标题 在 CollapseToolBarLayout 展开时显示的字体颜色
expandedTitleColor: string(color value);
// toolbar 标题 在 CollapseToolBarLayout 展开时显示位置
expandedTitleGravity: number(Gravity);
// toolbar 标题 在 CollapseToolBarLayout 展开时 外边距控制
expandedTitleMargin: number[];
// toolbar 标题 在 CollapseToolBarLayout 展开时 外左边距控制
expandedTitleMarginStart: number;
// toolbar 标题 在 CollapseToolBarLayout 展开时 外上边距控制
expandedTitleMarginTop: number;
// toolbar 标题 在 CollapseToolBarLayout 展开时 外右边距控制
expandedTitleMarginEnd: number;
// toolbar 标题 在 CollapseToolBarLayout 展开时 外下边距控制
expandedTitleMarginBottom: number;
// 遮罩过度动画持续时间(ms)
scrimAnimationDuration: number;
// 设置收起多少高度时,显示遮罩的内容
scrimVisibleHeightTrigger: number;
// 是否显示遮罩
scrimsShown: boolean;
// 是否显示遮罩动画
scrimsShownAnimate: boolean;
// 状态栏遮罩颜色
statusBarScrimColor: string;
// 标题
title: string;
// 启用标题开关
titleEnable: boolean;
参考过:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent