View component for Rax.
$ npm install 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 });
© 2010 - cnpmjs.org x YWFE | Home | YWFE