at-rn-android-kit/components/collapsing-toolbar-layout.js

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

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

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

import Layout from './layout';
import {
    LayoutParams,
    ViewGroupProperties
} from './types';

const MaoKitsCollapsingToolbarLayoutManager = UIManager.MaoKitsCollapsingToolbarLayoutAndroid;
const Constants = MaoKitsCollapsingToolbarLayoutManager.Constants;

export interface CollapsingToolbarLayoutLayoutParams extends LayoutParams {
    collapseMode?: CollapsingToolbarLayout.CollapseMode;
    collapseParallaxMultiplier?: number;
}

export interface CollapsingToolbarLayoutProps extends ViewGroupProperties {
    contentScrimColor?: string;
    collapsedTitleGravity?: number;
    tcollapsedTitleColor?: string;
    expandedTitleColor?: string;
    expandedTitleGravity?: number;
    expandedTitleMargin?: number[];
    expandedTitleMarginStart?: number;
    expandedTitleMarginTop?: number;
    expandedTitleMarginEnd?: number;
    expandedTitleMarginBottom?: number;
    scrimAnimationDuration?: number;
    scrimVisibleHeightTrigger?: number;
    scrimsShown?: boolean;
    scrimsShownAnimate?: boolean;
    statusBarScrimColor?: string;
    title?: string;
    titleEnable?: boolean;
}

export class CollapsingToolbarLayout extends PureComponent<CollapsingToolbarLayoutProps, any> {
    componentDidMount() {
        Layout.setChildrenLayoutParams(this, MaoKitsCollapsingToolbarLayoutManager);
    };

    render() {
        let props = Object.assign({}, this.props);
        props.expandedTitleMargin = props.expandedTitleMargin || [];

        props.expandedTitleMargin[0] = props.expandedTitleMarginStart || props.expandedTitleMargin[0] || 0;
        props.expandedTitleMargin[1] = props.expandedTitleMarginTop || props.expandedTitleMargin[1] || 0;
        props.expandedTitleMargin[2] = props.expandedTitleMarginEnd || props.expandedTitleMargin[2] || 0;
        props.expandedTitleMargin[3] = props.expandedTitleMarginBottom || props.expandedTitleMargin[3] || 0;

        delete props.expandedTitleMarginStart;
        delete props.expandedTitleMarginTop;
        delete props.expandedTitleMarginEnd;
        delete props.expandedTitleMarginBottom;

        props.scrimsShown = [
            !!props.scrimsShown,
            !!props.scrimsShownAnimate
        ];

        delete props.scrimsShownAnimate;

        return (
            <RCTCollapsingToolbarLayout
                {...props}
            >
                {this.props.children}
            </RCTCollapsingToolbarLayout>
        );
    }
}

const RCTCollapsingToolbarLayout: any = requireNativeComponent(
    'MaoKitsCollapsingToolbarLayoutAndroid',
    CollapsingToolbarLayout,
    {
        nativeOnly: {}
    }
);
export default CollapsingToolbarLayout;