@marslibs/yfereact-freetemplate-common v2.0.2

@marslibs/yfereact-freetemplate-common

说明

店铺装修ISV模板通用方法

安装

npm install @marslibs/yfereact-freetemplate-common

使用

基本功能楼层例子

基本功能楼层可以实现接收楼层数据源，以及根据内容自动生成楼层高度

import React from 'react'
import { View, Text } from 'react-native'

// 调试预览时可暂时注释掉
import { Floor,Util,FloorManager } from '@marslibs/yfereact-freetemplate-common'

export default class Example extends React.Component {
    constructor(props) {
        super(props)

        // 调试预览时可暂时注释掉
        this.state = {
            data: Util.getSafeFloorData(this.props.data)
        };
        // 注册监听楼层刷新，调试预览时可暂时注释掉
        FloorManager.addFloorDataUpdateListener(this, props.id);
    }

    render() {

        //  【发布打包时】生成bundle时需要使用Floor包裹的形式，调试预览时可暂时注释掉

        //  this.props.id       楼层的id    必传
        //  this.props.data     楼层的数据  必传
        return (<Floor id={this.props.id} data={this.props.data}>
                  <View style={{backgroundColor: 'red'}} >
                       <Text style={{height: 100}}>Hello world</Text>
                    </View>
                </Floor>)

        // 【调试预览时】使用@areslabs生成H5预览，直接写自己的业务代码，
        return  <View style={{backgroundColor: 'red'}} >
                       <Text style={{height: 100}}>Hello world</Text>
                </View>
    }



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

监听滚动功能的楼层例子

监听滚动功能是在基础功能的基础上，使用ListScrollManager监听了楼层滚动

import React from 'react'
import { View } from 'react-native'

// 调试预览时可暂时注释掉
import { Floor,Util,FloorManager } from '@marslibs/yfereact-freetemplate-common'

export default class Example extends React.Component {
    constructor(props) {
        super(props)

        // 调试预览时可暂时注释掉
        this.state = {
            data: Util.getSafeFloorData(this.props.data)
        };
        // 注册监听楼层刷新，调试预览时可暂时注释掉
        FloorManager.addFloorDataUpdateListener(this, props.id);
    }

    render() {

        //  【发布打包时】生成bundle时需要使用Floor包裹的形式，调试预览时可暂时注释掉

        //  this.addListener()

        //  this.props.id       楼层的id    必传
        //  this.props.data     楼层的数据  必传
        // return (<Floor id={this.props.id} data={this.props.data}>
        //         <View style={{height:100, backgroundColor: 'red'}} >
        //         </View>
        //     </Floor>)

        // 【调试预览时】使用@areslabs生成H5预览，直接写自己的业务代码，
        return <View style={{height:100, backgroundColor: 'red'}} ></View>
    }



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

    /**
     *  监听楼层滚动回调方法
     *
     * @param {number} firstRow
     * @param {number} lastRow
     * @param {boolean} visible
     * @param {number} firstShowRow
     * @param {number} offset
     * @memberof Example
     */
    onListScroll(firstRow, lastRow, visible, firstShowRow, offset) {
        console.log(`firstRow:${firstRow}-lastRow=${lastRow}-visible${visible}-firstShowRow${firstShowRow}-offset${offset}`);
    }

    /**
     * 监听页面显示隐藏的回调方法
     *
     * @param {string} pageId
     * @param {boolean} showStatus
     * @memberof Example
     */
    onPageShowStatusChange(pageId, showStatus) {
        console.log(`pageId=${pageId}-showStatus=${showStatus}`);
    }

    // 调试预览时可暂时注释掉
    addListener() {

        let { pageId, uid } = FloorManager.getFloorIdentiInfo(this, this.props.id);

        // 监听页面显示隐藏
        PageVisibleManager.addPageShowStatusListener(this, pageId);

        // 监听楼层滚动
        ListScrollManager.addScrollListener(this, pageId, uid);
    }

    componentWillUnmount(){
        // PageVisibleManager和ListScrollManager注册监听后需在componentWillUnmount时移除，调试预览时需暂时注释掉
        const { pageId } = FloorManager.getFloorIdentiInfo(this, this.props.id);
        PageVisibleManager.removePageShowStatusListener(pageId, this);
        ListScrollManager.removeScrollListener(this);
    }
}

组件props

Floor

Floor用于作为根视图容器，必传props传数是id、data

id 楼层的id 必传 data 楼层的数据 必传

注意: 楼层组件必须用Floor作为根视图包裹起来

CycleVideo

CycleVideo循环播放视频组件，必传props传数id、source

id 楼层的id 必传

source 视频参数{{url: "视频源链接",imgUrl: "背景占位图链接"}}

因为android的视频组件外层包括TouchableOpacity点击事件无响应，所以新增了onVideoClick方法，ios没有实现onVideoClick方法，所以同时包括TouchableOpacity并实现onVideoClick方法。 示例

if (Platform.OS == 'android') {
    return <CycleVideo
        style={{ height: 100 }}
        id={this.props.id}
        source={{ url: "视频源链接", imgUrl: "背景占位图链接" }}
        onVideoClick={(event) => {
            console.log("点击了视频");
        }} />
} else {
    return <TouchableOpacity
        onPress={(event) => {
            console.log("点击了视频");
        }}>
        <CycleVideo
            style={{ height: 100 }}
            id={this.props.id}
            source={{ url: "视频源链接", imgUrl: "背景占位图链接" }}
        />
    </TouchableOpacity>
}

注意：id url imgUrl 是必传参数

组件API

Util

Util提供一些通用的工具方法

getSafeFloorData

Object Util.getSafeFloorData(Object data)

android返回的data是json格式字符串需要使用此方法获取安全的JSON对象的楼层数据

data 传入的楼层数据

返回值是JSON对象

getNodeTextData

Object Util.getNodeTextData(Object data, string name);

获取对应组件的数据源

data 传入的楼层数据

name 组件对应的名称

返回值是JSON对象

getNodeText

Object Util.getNodeText(Object data, string name);

获取对应组件的数据源

data 传入的楼层数据

name 组件对应的名称

返回值是JSON对象

getDataDefine

Object Util.getDataDefine(Object data, string name);

获取对应组件的数据源

data 传入的楼层数据

name 组件对应的名称

返回值是JSON对象

getRpx

number Util.getRpx(number size);

获取等比像素

size 原有像素值

返回值等比的rpx

Tracker

Tracker用于埋点数据上报

Tracker.click()

点击事件上报

FloorManager

FloorManager用于注册管理楼层的数据

addFloorDataUpdateListener

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

object 楼层组件this

id 楼层的参数id

onFloorDataUpdate

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

data 楼层的数据

getFloorIdentiInfo

FloorManager.getFloorIdentiInfo(Object this, string id)

object 楼层组件this

id 楼层的参数id

返回楼层信息的对象包含：pageId、uid等

ListScrollManager

ListScrollManager用于监听楼层滚动

addScrollListener

ListScrollManager.addScrollListener(Object this, string pageId, string uid) 添加楼层滚动监听,添加后记得在componentWillUnmount时移除

this 楼层组件this

pageId 页面的pageId

id 楼层的参数id

onListScroll

onListScroll(number firstRow, number lastRow, boolean visible, boolean firstShowRow, number offset) 监听楼层滚动的回调方法

firstRow 第一个展示楼层位置

lastRow 最后一个展示楼层位置

visible 是否显示

firstShowRow 第一个可见楼层位置，如有悬浮时会部分遮住第一个楼层，导致可视楼层位置为2

offset 控制listView滚动偏移量，当有悬浮时，listview锚点时，需要向下偏移悬浮高度

举例：手机屏幕高度是100px，有个原生有个ListView，总共有10个楼层，每个楼层高度都是50px。那么刚开始ListView显示出来还未往上滑动时，我们在第0个楼层监听到的onListScroll回调方法的firstRow：0，lastRow：1，visible：true，firstShowRow：0，offset：0； 当ListView往上滑动50px时，firstRow：1，lastRow：2，visible：false，firstShowRow：1，offset：0；当原生的ListView有偏移量40px时，offset为40;

removeScrollListener

ListScrollManager.removeScrollListener(Object this) 移除监听

this 楼层组件this

PageVisibleManager

PageVisibleManager用于监听页面显示或消失

addPageShowStatusListener

PageVisibleManager.addPageShowStatusListener(Object this, string pageId) 添加监听页面显示或隐藏，添加后记得在componentWillUnmount时移除

this 楼层组件this

pageId 页面的pageId

removePageShowStatusListener

PageVisibleManager.removePageShowStatusListener(string pageId, Object this) 移除监听

pageId 页面的pageId

this 楼层组件this

onPageShowStatusChange

onPageShowStatusChange(string pageId, boolean showStatus) 监听页面显示或隐藏的回调方法

pageId 页面的pageId

showStatus 页面的显示状态

调试

本组件依赖原生API，目前暂时只能在APP环境内看到展示效果，目前与@areslabs配合的临时方案，使用@areslabs开发生成H5预览，开发阶段需将组件的相关代码暂时注释，等正式打包时再取消相关注释。

常见问题

参数传递问题

比如AppRegistry.registerComponent注册对应的根视图是Home，那么render方法中必须要将传递参数render() {return <Home {...this.props}></Home>; },否则视图会无法正常显示出来。

使用areslabs生成web预览时报loader错误

因为areslabs打包web时不支持本组件的转换，所以需要在预览的时候注释掉@marslibs相关依赖，具体参考文档上面的的例子

布局flex:1相关的视图无法展示问题

店铺的RN楼层和正常的RN不同，店铺的根视图Floor的高度默认是0，所以在使用flex:1的时候需要注意，以下是几种示例情况：

return (<Floor id={this.props.id} data={this.props.data}>
    {/* Floor的高度是0，所以flex:1会跟着填满Floor高度也是0，视图红色视图无法显示 */}
    <View style={{flex:1,backgroundColor: 'red' }} />
</Floor>)

return (<Floor id={this.props.id} data={this.props.data}>
    {/* Floor的高度是0，所以flex:1会跟着填满Floor高度也是0，视图红色视图无法显示 */}
    <View style={{flex:1,backgroundColor: 'red' }} >
        {/* 根视图高度是0，父视图红色的高度是0，虽然绿色的子视图1000，但还是无法正常显示 */}
        <View style={{height:1000,backgroundColor: 'green' }} />
    </View>
</Floor>)

return (<Floor id={this.props.id} data={this.props.data}>
    {/* Floor的高度是0，所以flex:1会跟着填满Floor高度也是0，视图红色视图无法显示 */}
    <View style={{flex:1,backgroundColor: 'red' }} >
        {/* 根视图高度是0，父视图红色的高度是0，虽然绿色的子视图1000，但还是无法正常显示 */}
        <View style={{height:1000,backgroundColor: 'green' }} />
    </View>
</Floor>)

return (<Floor id={this.props.id} data={this.props.data}>
    <View style={{backgroundColor: 'red' }} >
        {/* 根视图高度是0，父视图红色的高度暂无，但是绿色的子视图1000，直接将红色的父视图及跟视图高度撑起，可以正常展示 */}
        <View style={{height:1000,backgroundColor: 'green', marginTop: 100 }} />
    </View>
</Floor>)

return (<Floor id={this.props.id} data={this.props.data}>
    <View style={{backgroundColor: 'red' }} >
        {/* 根视图高度是0，父视图红色的高度暂无，但是绿色的子视图1000，直接将红色的父视图及跟视图高度撑起，可以正常展示 */}
        <View style={{height:1000,backgroundColor: 'green', marginTop: 100 }} />
    </View>
    {/* 根视图高度是0，flex:1跟着撑满父视图的高度所以黄色的视图高度还是0，因此无法正常显示 */}
    <View style={{backgroundColor: 'yellow', flex:1 }}></View>
</Floor>)

因此flex:1的布局方式慎用，一定要确定父视图有固定高度的情况下才可用。

ios和android数据差异导致android无法显示或显示错误问题

原生在向RN传递数据的时候this.props.data在ios和android两个平台的数据类型是有差异的，ios直接是JSON对象，android是JSON格式的字符串，为了统一数据格式在获取楼层数据this.props.data时需要使用Util.getSafeFloorData(this.props.data)方法，这样统一返回一个JSON对象。不过个人更建议直接在根组件中处理下，比如你的根组件视图是Home，那么我们可以使用Util.getSafeProps(this.props)方法处理this.props.data成统一的JSON对象：

render() {
    let safeProps = Util.getSafeProps(this.props)
    return <Home {...safeProps}></Home>;
}

这样加这一处代码就可以确保Home里面的children组件视图可以安全放心的使用this.props.data的楼层数据

关于像素问题

理论上我们设备是以iphone6为标注宽度是375像素，但是因为楼层布局的时候左右各留了12像素,所以在使用布局宽高的时候需要进行换算，可参考以下代码

var { Platform,PixelRatio } =  require('react-native');
const isApp = (Platform.OS == 'android' || Platform.OS == 'ios') ? true : false
function getRpx(size){
	if (!isApp) {
		return size
	}
	const windowWidth = window.width;
	const floorWidth = windowWidth - 24;
	const scale = floorWidth / 375;
	const rpx = size * scale;
	return PixelRatio.roundToNearestPixel(rpx);
}

所有布局都通过getRpx方法转一次，所以如果使用areslabs提供的JDDevice.width方法获取的宽度是真实设备的宽度，而不是楼层的宽度。所以建议一般使用View的话就不用写宽度，默认就是铺满楼层的宽度，或者使用getRpx(375)就是楼层宽度。比如：一张图片是宽是750、高是400，说明此时宽度是标准375的两倍，那么高度也要除于2，那么此时代码布局宽高分别是应该是getRpx(375)、getRpx(200)。