jdreact-plugin-freetemplate-common

说明

店铺装修ISV模板通用方法

安装

npm install @ares/jdreact-plugin-freetemplate-common --save

使用

import React from 'react'
import { View } from 'react-native'
import { JDTouchable, JDLog } from '@areslabs/jdreact-core-scripts'

import { Floor } from '@ares/jdreact-plugin-freetemplate-common'

export default class Example extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: this.props.data
        };
        // 注册监听楼层刷新
        FloorManager.addFloorDataUpdateListener(this, this.props.id);
    }

    render() {
        this.addListener();
        return (<JDTouchable onPress={this.clickHandle.bind(this)} >
            <Floor {...this.props}>
                <View style={{ backgroundColor: this.state.data.color, height: this.state.data.height }} >
                </View>
            </Floor>
        </JDTouchable>
        )
    }

    clickHandle(event) {
        let { uid } = FloorManager.getFloorIdentiInfo(this, this.props.id);
        JDLog.d(`uid=${uid}-event=${event}`);
    }

    /**
     * 监听楼层刷新后的回调方法
     * 
     * @param {Object} data
     * @memberof Example
     */
    onFloorDataUpdate(data) {
        this.setState({
            data
        })
    }
}

组件props

使用Floor或NavTab时需要通过{...this.props}传递原生参数

组件API

FloorManager

addFloorDataUpdateListener

FloorManager.addFloorDataUpdateListener(Object object, string id) 注册楼层数据更新的监听

object 楼层组件this

id 楼层的参数id

onFloorDataUpdate

onFloorDataUpdate(Object data) 楼层数据更新的回调函数

data 楼层的数据