Question

描述

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