# rax-view

> View component for Rax.

Latest version **2.3.0** (published 2021-12-22) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install rax-view
pnpm add rax-view
yarn add rax-view
bun add rax-view
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.0 |
| Published | 2021-12-22 |
| First published | 2017-03-01 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 141.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 90 |
| Maintainers | rax-publisher |
| Keywords | Rax, rax-component, react-component |

## Links

- npm: https://www.npmjs.com/package/rax-view
- Repository: https://github.com/raxjs/rax-components
- Homepage: https://github.com/raxjs/rax-components#readme
- Issues: https://github.com/raxjs/rax-components/issues
- npm.io page: https://npm.io/package/rax-view

## Dependencies (2)

- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [universal-env](https://npm.io/package/universal-env.md) ^3.0.0

## Recent versions

- 2.3.0 (latest) — 2021-12-22
- 2.2.1-beta.1 (beta) — 2021-08-04
- 2.2.1 — 2021-08-05
- 2.1.0-beta.1 — 2021-08-04
- 2.2.0 — 2021-07-13
- 2.2.0-0 — 2021-07-13
- 2.1.1 — 2021-06-30
- 2.1.1-0 — 2021-06-30
- 2.1.0 — 2021-06-28
- 2.0.6-4 — 2021-06-03
- 2.0.6-3 — 2021-03-25
- 2.0.6-2 — 2021-03-24
- 2.0.6-1 — 2021-03-16
- 2.0.6-0 — 2021-02-23
- 2.0.5 — 2021-02-18
- … 96 more at https://npm.io/package/rax-view/versions

## README

# rax-view

[![npm](https://img.shields.io/npm/v/rax-view.svg)](https://www.npmjs.com/package/rax-view)

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

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

## 安装

```bash
$ npm install rax-view --save
```

## 属性

|**属性**| **类型** | **默认值** | **必填** | **描述** | **支持** |
| ----------- | ---------- | ---------- | ------------ | ------------------ | ------------ |
| className | `string` | - | false | 自定义样式名 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px">|
| style | `CSSProperties` | - | false | 自定义样式 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px">|
| onClick | `function` | - | false | 点击 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px">|
| onLongpress | `function` | - | false | 长按 | <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px">|
| onAppear | `function` | - | false | 当前元素可见时触发 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /> <img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px">|
| onDisappear | `function` | - | false | 当前元素从可见变为不可见时触发 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px">|
| onFirstAppear | `function` | - | false | 当前元素首次可见时触发 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px">|
| onTouchStart | `function` | - | false | 触摸动作开始 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px">|
| onTouchMove | `function` | - | false | 触摸后移动 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px">|
| onTouchEnd | `function` | - | false | 触摸动作结束 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px">|
| onTouchCancel | `function` | - | false | 触摸动作被打断，如来电提醒，弹窗 | <img alt="browser" src="https://gw.alicdn.com/tfs/TB1uYFobGSs3KVjSZPiXXcsiVXa-200-200.svg" width="25px" height="25px" /> <img alt="weex" src="https://gw.alicdn.com/tfs/TB1jM0ebMaH3KVjSZFjXXcFWpXa-200-200.svg" width="25px" height="25px" /><img alt="miniApp" src="https://gw.alicdn.com/tfs/TB1bBpmbRCw3KVjSZFuXXcAOpXa-200-200.svg" width="25px" height="25px" /> <img alt="wechatMiniprogram" src="https://img.alicdn.com/tfs/TB1slcYdxv1gK0jSZFFXXb0sXXa-200-200.svg" width="25px" height="25px">|

## 注意

- appear 相关事件在 Web 中需要引入并使用 [`appear-polyfill`](https://github.com/raxjs/appear-polyfill)
- `onAppear`/`onDisappear`/`onFirstAppear` 在微信小程序端仅支持运行时方案

## 示例

```jsx
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 默认样式如下：

```css
.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;
}
```

---
_Source: https://npm.io/package/rax-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._