at-rn-android-kit/components/tab-layout.js

为 React Native 开发 提供的一些Android原生模块/组件 (react native, CoordinatorLayout, AppBarLayout, TabLayout, NestedScrollView, PopupWindow)

import React, {
    Children,
    PropTypes,
    PureComponent,
    createElement
} from 'react';

import {
    UIManager,
    View,
    ViewPagerAndroidStatic,
    ViewProperties,
    findNodeHandle,
    requireNativeComponent
} from 'react-native';

export interface Tab {
    text: string;
}

export interface TabLayoutProps extends ViewProperties {
    tabs?: Tab[];
    tabTextSize?: number;
    tabTextColor?: string;
    tabSelectedTextColor?: string;
    tabIndicatorColor?: string;
    tabIndicatorHeight?: number;
    tabMode?: 'scrollable' | 'fixed';
    tabGravity?: 'center' | 'fill';
    activeTabStyle?: any;
    tabHeight?: number;
    tabSidePadding?: number;
}

export type SizeParam = number | 'match_parent' | 'wrap_content';

const Commands = UIManager.MaoKitsTabLayoutAndroid.Commands;
const SETUP_VIEW_PAGER = Commands.setupViewPager;
const SET_VIEW_SIZE = Commands.setViewSize;

export default class TabLayout extends PureComponent<TabLayoutProps, any> {

    render() {
        return (
            <RCTTabLayout
                {...this.props}
                style={[
                    {height: 48},
                    this.props.style
                ]}/>
        );
    }

    setViewPager(viewPager: ViewPagerAndroidStatic, tabs: Tab[], smoothScroll: boolean = true) {
        if (!viewPager) {
            return;
        }

        const viewPagerID = findNodeHandle(viewPager);

        UIManager.dispatchViewManagerCommand(
            findNodeHandle(this),
            SETUP_VIEW_PAGER,
            [viewPagerID, tabs, smoothScroll]
        );
    }

    setViewSize(width: SizeParam, height?: SizeParam) {
        let sizeMap: Object = {};
        if (width !== undefined) {
            sizeMap.height = width;
        }

        if (height !== undefined) {
            sizeMap.width = height;
        }

        UIManager.dispatchViewManagerCommand(
            findNodeHandle(this),
            SET_VIEW_SIZE,
            [sizeMap]
        );
    }
}

const RCTTabLayout: any = requireNativeComponent(
    'MaoKitsTabLayoutAndroid',
    TabLayout,
    {
        nativeOnly: {}
    }
);