rax-view
TypeScript icon, indicating that this package has built-in type declarations

2.3.0 • Public • Published

rax-view

npm

支持

Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序

描述

View 是最基础的组件,它支持 Flexbox、touch handling 等功能,并且可以任意嵌套。 不论在什么容器中,View 都直接对应一个容器的原生视图,就像 web 中的 div 一样。 支持任意自定义属性的透传。

安装

$ npm install rax-view --save

属性

属性 类型 默认值 必填 描述 支持
className string - false 自定义样式名 browser weex miniApp wechatMiniprogram
style CSSProperties - false 自定义样式 browser weex miniApp wechatMiniprogram
onClick function - false 点击 browser weex miniApp wechatMiniprogram
onLongpress function - false 长按 weex miniApp wechatMiniprogram
onAppear function - false 当前元素可见时触发 browser weex miniApp wechatMiniprogram
onDisappear function - false 当前元素从可见变为不可见时触发 browser weexminiApp wechatMiniprogram
onFirstAppear function - false 当前元素首次可见时触发 browser weexminiApp wechatMiniprogram
onTouchStart function - false 触摸动作开始 browser weexminiApp wechatMiniprogram
onTouchMove function - false 触摸后移动 browser weexminiApp wechatMiniprogram
onTouchEnd function - false 触摸动作结束 browser weexminiApp wechatMiniprogram
onTouchCancel function - false 触摸动作被打断,如来电提醒,弹窗 browser weexminiApp wechatMiniprogram

注意

  • appear 相关事件在 Web 中需要引入并使用 appear-polyfill
  • onAppear/onDisappear/onFirstAppear 在微信小程序端仅支持运行时方案

示例

import { createElement, useRef, useEffect, render } from "rax";
import DU from "driver-universal";
import View from "rax-view";

const App = () => {
  const viewRef = useRef(null);
  useEffect(() => {});
  return (
    <View
      ref={viewRef}
      style={{
        padding: '30rpx'
      }}
      onClick={() => {
        alert("container was clicked!");
      }}
    >
      <View
        style={{
          width: '300rpx',
          height: '300rpx',
          backgroundColor: "red"
        }}
        onClick={e => {
          e.stopPropagation();
          alert("red was clicked");
        }}
      />
      <View
        style={{
          width: '300rpx',
          height: '300rpx',
          backgroundColor: "green",
          position: "absolute",
          top: '20rpx',
          left: '20rpx'
        }}
        onClick={() => {
          alert("green was clicked");
        }}
      />
      <View
        style={{
          width: '300rpx',
          height: '300rpx',
          backgroundColor: "yellow",
          position: "absolute",
          top: '80rpx',
          left: '210rpx'
        }}
        onClick={e => {}}
      />
    </View>
  );
};

render(<App />, document.body, { driver: DU });

默认样式

rax-view 默认样式如下:

.rax-view-v2 {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
   align-content: flex-start;
   border: 0 solid black;
   margin: 0;
   padding: 0;
   min-width: 0;
}

Package Sidebar

Install

npm i rax-view

Weekly Downloads

160

Version

2.3.0

License

BSD-3-Clause

Unpacked Size

145 kB

Total Files

38

Last publish

Collaborators

  • rax-publisher