yacheng/rax-view

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

安装

$ npm install rax-view --save

属性

注： 1、支持列表中的 代表 h5 代表 weex 代表小程序

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

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: 30
      }}
      onClick={() => {
        alert("container was clicked!");
      }}
    >
      <View
        style={{
          width: 300,
          height: 300,
          backgroundColor: "red"
        }}
        onClick={e => {
          e.stopPropagation();
          alert("red was clicked");
        }}
      />
      <View
        style={{
          width: 300,
          height: 300,
          backgroundColor: "green",
          position: "absolute",
          top: 20,
          left: 20
        }}
        onClick={() => {
          alert("green was clicked");
        }}
      />
      <View
        style={{
          width: 300,
          height: 300,
          backgroundColor: "yellow",
          position: "absolute",
          top: 80,
          left: 210
        }}
        onClick={e => {}}
      />
    </View>
  );
};

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