组件

Layout native 渲染层组件

layout 组件封装 native 弹层，使弹层里面的内容在一个新的 webView 中展示，主要用用于覆盖 native header 的情况。layout 的子组件必须是一个继承 PageCore 的组件。

layout 组件提供了 removeDelay 参数，当弹层状态更新为关闭时，弹层内部可能存在受变量控制的 Animate 或 Modal 组件，此时 layout 需要等待动画完成再关闭，因此接收一个关闭延时变量。layout 接收的 blockHeader 参数为 boolean 类型，native 会获取当前 native header （包括 ios 顶部状态条）高度让 webView 空出这部分。layout 接收 offset 参数为 number 类型，单位为逻辑像素。

示例

首先封装继承 pageCore 的子组件。

代码节选自：yis-demo/src/pages/components/layout/layout.js

import { registerPage, PageCore } from "@qnpm/yis";
import { View } from '@qnpm/yis/components';
import styles from './main.css';
export default class LayoutContent extends PageCore{
    renderList(){
        return new Array(50).fill('0').map((i, index)=>(
            <View onTouchTap={()=>{
                this.props.changeTap()
            }}>{index}</View>
        ));
    }
    render(){
        return(
            <div className={styles.layout}>
               {this.renderList()}
            </div>
        )
    }
}

registerPage("LayoutContent", LayoutContent);

指定注册页面同名的子组件为 Layout 组件的 pageName 属性的值。

代码节选自：yis-demo/src/pages/components/layout/index.js

import { View, Test, Layout, Button, Page} from "@qnpm/yis/components";
import { registerPage, PageCore } from "@qnpm/yis";
import styles from "./main.css";
import classnames from "classnames";
import LayoutContent from './layout';

export default class LayoutDemo extends PageCore {
    state = {
        displayState: false,
        blockHeader: false,
        offsetTop: 100
    };
    render() {
        return (
            <Page>
                <Button
                    label="展示 layout"
                    onTouchTap={() => {
                        this.setState({
                            showState: true
                        });
                    }}
                />
                <Layout
                    displayState={this.state.showState}
                    pageName='LayoutContent'
                    removeDelay={600}
                    blockHeader={true}
                    offsetTop={50}
                    onOpen={() => {
                        console.log("onOpen");
                    }}
                    onClose={() => {
                        console.log("onClose");
                    }}
                >
                    <LayoutContent
                        changeTap={()=>{
                            this.setState({
                                showState: false
                            })
                        }}
                    />
                </Layout>
            </Page>
        );
    }
}

参数

参数名	类型	必选	默认值	描述
pageName	string	√	无	弹层页面名称与 registerPage 中保持一致
displayState	boolean	√	无	显示隐藏状态
offsetTop	number	√	无	弹层顶部偏移量
removeDelay	number	√	无	删除时的延时时间用于配合动画
blockHeader	boolean	×	false	是否不使用 nativeHeader
onClose	functon	×	无	关闭弹层触发的事件
onOpen	functon	×	无	打开弹层触发的事件