View

优质

小牛编辑

127浏览

2023-12-01

描述

View 是最基础的组件，默认为 Flexbox 布局，并且可以任意嵌套。

不论在什么容器中，View 都直接对应一个容器的原生视图，比如在 Web 容器中是使用 div 实现的。

支持任意自定义属性的透传。

安装

$ npm install rax-view --save

属性

属性	类型	默认值	必填	描述
onLongPress	`Function`	-	✘	当组件被长按时触发的事件
onAppear	`Function`	-	✘	当组件在视窗内可见时触发的事件
onDisappear	`Function`	-	✘	当组件在视窗内消失时触发的事件
onTouchStart	`Function`	-	✘	触摸到组件时触发的事件
onTouchMove	`Function`	-	✘	手指在组件上移动时触发的事件
onTouchEnd	`Function`	-	✘	触摸动作结束时触发的事件
onTouchCancel	`Function`	-	✘	触摸动作被打断，如来电提醒，弹窗

注：

onAppear 和 onDisAppear 在 Web 容器内需要引入 polyfill。

基础属性、事件及图片含义见组件概述。

示例

基础用法

import View from "rax-view";

function App() {
  return <View
	style={{
	  width: 200,
	  height: 200,
	  backgroundColor: '#222831',
	}}
	/>;
}

添加事件

import View from "rax-view";

function App() {
  return <View
	onClick={() => {
	}}
	style={{
	  width: 200,
	  height: 200,
	  backgroundColor: '#222831',
	}}
	/>;
}

其他布局

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

function App() {
  return (
    <View
      onClick={() => {
        alert('container was clicked!');
      }}
    >
      <View
        style={{
          width: 300,
          height: 300,
          backgroundColor: 'red',
        }}
      />
      <View
        style={{
          width: 300,
          height: 300,
          backgroundColor: 'green',
        }}
      />
      <View
        style={{
          width: 300,
          height: 300,
          backgroundColor: 'yellow',
        }}
      />
    </View>
  );
}

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