@hyext/sence-responser

根据不同的场景应用不同的样式，自动更新ui的工具库(适用于浮窗类型的小程序)

Install

$ npm i @hyext/sence-responser -S

Usage

import React, { Component } from "react";
import { ResponsiveRoot, addClassForSence } from '@hyext/sence-responser'
import { UI } from '@hyext/hy-ui'

const { View, Image } = UI

class App extends Component {
  handleLayoutChange = (e) => {
    console.log(e, 'handleLayoutChange')
  }

  componentDidMount() {
    global.hyExt.panel.setLayout({
      visible: true,
      x: 0,
      y: 0,
      width: 1,
      height: 1,
      alpha: 1
    })
  }

  renderView = () => {
    return (
      <Demo></Demo>
    )
  }

  render() {
    return (
      <ResponsiveRoot renderView={this.renderView} onLayoutChange={this.handleLayoutChange}></ResponsiveRoot>
    )
  }
}

function Demo() {
  return (
    <View className="container">
      <Image className={addClassForSence('img')} src={require('../img/default-avatar.png')}></Image>
    </View>
  )
}

export default App

API

ResponsiveRoot

根节点组件，可根据场景变换(例如：app端的横竖屏切换)，自动更新子节点

Props

| Name | Type | Required | Default | Description | | ---- | ---- | ---- | ---- | ---- | | renderView | function | true | null | 渲染视图， 返回一个ReactElement | | onLayoutChange | function | false | null | 重新布局RN容器或横竖屏切换时触发 ，传入一个 { isLandscape: boolean, screenWidth: number, screenHeight: number } 对象 |

getCurrentSence():string

获取当前场景，总有三种类型：'web' | 'app_portrait' | 'app_landscape'。

addClassForSence（className: string):string

获得当前场景的className

Demo

  const res = addClassForSence('demo')
  // res 在不同的场景，结果有所不同
  // 在web，res = ’demo_web‘ 
  // 在app竖屏，res = ’demo_app_portrait‘ 
  // 在app横屏，res = ’demo_app_landscape‘ 

我们可以通过带有场景值后缀的类名布局不同的场景

  .demo {
    background-color: #fff
  }
  
  .demo_web {
    height: 100px;
    width: 100px;
  }

  .demo_app_portrait {
    height: 80px;
    width: 80px;
  }

   .demo_app_landscape {
    height: 120px;
    width: 120px;
  }

Notice

位于ResponsiveRoot下的子孙节点，请尽量少用class组件的shouldComponentUpdate或者PureComponenth或React.memo阻止组件重渲染，这样可能导致在横竖屏切换的时候，产生样式bug。