at-rn-android-kit/components/popupwindow.js

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

import React, {
    PropTypes,
    PureComponent,
} from 'react';
import {
    NativeComponent,
    ScrollView,
    ScrollViewProperties,
    StyleSheet,
    UIManager,
    View,
    ViewProperties,
    ViewStyle,
    findNodeHandle,
    requireNativeComponent
} from 'react-native';
import {ViewGroupProperties} from './types';

export interface PopupWindowProps extends ViewGroupProperties {
    focusable?: boolean;
    outsideTouchable?: boolean;
    touchable?: boolean;
}

const MaoKitsPopupWindowAndroid: any = UIManager.MaoKitsPopupWindowAndroid;
const Commands = MaoKitsPopupWindowAndroid.Commands;
const COMMAND_SHOW_POPUP_AS_DROPDOWN = Commands.showPopupAsDropdown;
const COMMAND_SHOW_POPUP_AS_LOCALTION = Commands.showPopupAsLocation;
const COMMAND_HIDE_POPUP = Commands.hidePopup;

export default class PopupWindow extends PureComponent<PopupWindowProps, any> {

    render() {
        return (
            <RCTPopupWindow
                {...this.props}
                style={styles.container}
            >
                {this.props.children}
            </RCTPopupWindow>
        );
    }

    showAsDropdown(view: any, x: number = 0, y: number = 0) {
        UIManager.dispatchViewManagerCommand(
            findNodeHandle(this),
            COMMAND_SHOW_POPUP_AS_DROPDOWN,
            [findNodeHandle(view), x, y]
        );
    }

    showAsLocation(gravity: number, x: number = 0, y: number = 0) {
        UIManager.dispatchViewManagerCommand(
            findNodeHandle(this),
            COMMAND_SHOW_POPUP_AS_LOCALTION,
            [gravity, x, y]
        );
    }

    hide() {
        UIManager.dispatchViewManagerCommand(
            findNodeHandle(this),
            COMMAND_HIDE_POPUP,
            []
        );
    }
}

const RCTPopupWindow: any = requireNativeComponent(
    'MaoKitsPopupWindowAndroid',
    PopupWindow,
    {
        nativeOnly: {}
    }
);

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        overflow: 'scroll',
        opacity: 0,
        height: 0,
        width: 999,
        top: -9999999,
        backgroundColor: 'transparent'
    }
});