rax-view

支持

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

描述

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

安装

$ npm install rax-view --save

属性

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

注意

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;
}

Current Tags

2.2.1-beta.1 ... beta (3 years ago)
2.3.0 ... latest (3 years ago)

111 Versions

2.3.0 ... 3 years ago
2.2.1 ... 3 years ago
2.2.1-beta.1 ... 3 years ago
2.1.0-beta.1 ... 3 years ago
2.2.0 ... 3 years ago
2.2.0-0 ... 3 years ago
2.1.1 ... 3 years ago
2.1.1-0 ... 3 years ago
2.1.0 ... 3 years ago
2.0.6-4 ... 3 years ago
2.0.6-3 ... 4 years ago
2.0.6-2 ... 4 years ago
2.0.6-1 ... 4 years ago
2.0.6-0 ... 4 years ago
2.0.5 ... 4 years ago
2.0.5-0 ... 4 years ago
2.0.4 ... 4 years ago
2.0.3 ... 4 years ago
2.0.1 ... 4 years ago
2.0.0-0 ... 4 years ago
2.0.0 ... 4 years ago
1.2.0 ... 4 years ago
1.2.0-1 ... 4 years ago
1.2.0-0 ... 4 years ago
1.1.2 ... 5 years ago
1.1.2-beta.1 ... 5 years ago
1.1.1-1 ... 5 years ago
1.1.1-0 ... 5 years ago
1.1.0 ... 5 years ago
1.1.0-0 ... 5 years ago
1.0.3-beta.3 [deprecated] ... 5 years ago
1.0.4-beta.1 [deprecated] ... 5 years ago
1.0.3-beta.2 [deprecated] ... 5 years ago
1.0.3-beta.1 [deprecated] ... 5 years ago
1.0.2 ... 5 years ago
1.0.1 ... 5 years ago
1.0.1-beta.11 ... 5 years ago
1.0.1-beta.10 ... 5 years ago
1.0.1-beta.9 ... 5 years ago
1.0.1-beta.8 ... 5 years ago
1.0.1-beta.7 ... 5 years ago
1.0.1-beta.6 ... 5 years ago
1.0.1-beta.5 ... 5 years ago
1.0.1-beta.4 ... 5 years ago
1.0.1-beta.3 ... 5 years ago
1.0.0-miniapp.beta.5 ... 5 years ago
1.0.1-beta.2 ... 5 years ago
1.0.1-beta.1 ... 5 years ago
1.0.1-beta.0 ... 5 years ago
1.0.0-miniapp.beta.4 ... 5 years ago
1.0.0-miniapp.beta.3 ... 5 years ago
1.0.0-miniapp.beta.2 ... 5 years ago
1.0.0-miniapp.beta.1 ... 6 years ago
1.0.0-miniapp.beta.0 ... 6 years ago
1.0.0-beta.2 ... 6 years ago
1.0.0-beta.1 ... 6 years ago
1.0.0 ... 6 years ago
1.0.0-beta.0 ... 6 years ago
0.6.5 ... 6 years ago
0.6.4 ... 6 years ago
0.6.3 ... 7 years ago
0.6.2 ... 7 years ago
0.6.1 ... 7 years ago
0.6.0 ... 7 years ago
0.5.4 ... 7 years ago
0.5.2 ... 7 years ago
0.5.1 ... 7 years ago
0.5.0 ... 7 years ago
0.4.20 ... 7 years ago
0.4.19 ... 7 years ago
0.4.18 ... 7 years ago
0.4.17 ... 7 years ago
0.4.16 ... 7 years ago
0.4.15 ... 7 years ago
0.5.0-beta ... 7 years ago
0.4.14 ... 7 years ago
0.4.13 ... 7 years ago
0.4.12 ... 7 years ago
0.4.11 ... 7 years ago
0.4.10 ... 7 years ago
0.4.9 ... 7 years ago
0.4.8 ... 7 years ago
0.4.7 ... 7 years ago
0.4.6 ... 7 years ago
0.4.5 ... 7 years ago
0.4.4 ... 7 years ago
0.4.3 ... 7 years ago
0.4.2 ... 7 years ago
0.4.1 ... 7 years ago
0.4.0 ... 7 years ago
0.3.8 ... 7 years ago
0.3.7 ... 7 years ago
0.3.6 ... 7 years ago
0.3.5 ... 7 years ago
0.3.4 ... 7 years ago
0.3.3 ... 8 years ago
0.3.2 ... 8 years ago
0.3.1 ... 8 years ago
0.3.0 ... 8 years ago
0.2.11 ... 8 years ago
0.2.10 ... 8 years ago
0.2.9 ... 8 years ago
0.2.8 ... 8 years ago
0.2.7 ... 8 years ago
0.2.6 ... 8 years ago
0.2.5 ... 8 years ago
0.2.4 ... 8 years ago
0.2.3 ... 8 years ago
0.2.2 ... 8 years ago
0.2.1 ... 8 years ago
0.2.0 ... 8 years ago