Skip to content

Commit

Permalink
docs(react,vue): update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@zoomchan-cxj
zoomchan-cxj committed Mar 29, 2022
1 parent 8a88f0a commit 487c1f3
Show file tree
Hide file tree
Showing 7 changed files with 135 additions and 85 deletions.
38 changes: 17 additions & 21 deletions docs/hippy-react/components.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,11 @@ import icon from './qb_icon_new.png';
| defaultSource | 指定当 `Image` 组件还没加载出来 `source` 属性指定的图片的占位符图片，当 `source` 属性指定的图片加载失败时， `Image` 组件会显示 `defaultSource` 属性指定的图片 | `string`: 图片 base64 字符串 | `ALL` |
| onError | 当加载错误的时候调用此回调函数，参数为 `nativeEvent: { error }` | `Function` | `ALL` |
| capInsets | 当调整 `Image` 大小的时候，由 `capInsets` 指定的边角尺寸会被固定而不进行缩放，而中间和边上其他的部分则会被拉伸。这在制作一些可变大小的圆角按钮、阴影、以及其它资源的时候非常有用。 | `{ top: number, left: number, bottom: number, right: number }` | `ALL` |
| onProgress | 在加载过程中不断调用，参数为 `nativeEvent: { loaded, total }` | `Function` | `iOS` |
| onTouchDown | 当用户开始触屏控件时（即用户在该控件上按下手指时），将回调此函数，并将触屏点信息作为参数传递进来； 参数为 `nativeEvent: { name, page_x, page_y, id }` | `Function` | `ALL` |
| onTouchMove | 当用户在控件移动手指时，此函数会持续收到回调，并通过event参数告知控件的触屏点信息；参数为 `nativeEvent: { name, page_x, page_y, id }` | `Function` | `ALL` |
| onTouchEnd | 当触屏操作结束，用户在该控件上抬起手指时，此函数将被回调，event参数也会通知当前的触屏点信息；参数为 `nativeEvent: { name, page_x, page_y, id }` | `Function` | `ALL` |
| onTouchCancel | 当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，触屏点信息也会通过event参数告知前端；参数为 `nativeEvent: { name, page_x, page_y, id }` | `Function` | `ALL` |
| onProgress | 在加载过程中不断调用，参数为 `nativeEvent: { loaded: number, total: number }`, `loaded` 表示加载中的图片大小， `total` 表示图片总大小 | `Function` | `iOS` |
| onTouchDown | 当用户开始在控件上按下手指时，将回调此函数，并将触屏点信息作为参数传递进来； 参数为 `nativeEvent: { name, page_x, page_y, id }`, `page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置| `Function` | `ALL` |
| onTouchMove | 当用户在控件移动手指时，此函数会持续收到回调，并通过event参数告知控件的触屏点信息；参数为 `nativeEvent: { name, page_x, page_y, id }`，`page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置 | `Function` | `ALL` |
| onTouchEnd | 当触屏操作结束，用户在该控件上抬起手指时，此函数将被回调，event参数也会通知当前的触屏点信息；参数为 `nativeEvent: { name, page_x, page_y, id }`，`page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置 | `Function` | `ALL` |
| onTouchCancel | 当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，触屏点信息也会通过event参数告知前端；参数为 `nativeEvent: { name, page_x, page_y, id }`，`page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置 | `Function` | `ALL` |

## 方法

Expand Down Expand Up @@ -97,7 +97,7 @@ import icon from './qb_icon_new.png';
| overScrollEnabled | 是否开启回弹效果，默认 `true` | `boolean` | `Android` |
| getRowKey | 指定一个函数，在其中返回对应条目的 Key 值，详见 [React 官文](//reactjs.org/docs/lists-and-keys.html) | `(index: number) => any` | `ALL` |
| getRowStyle | 设置`ListViewItem`容器的样式。当设置了 `horizontal=true` 启用横向 `ListView` 时，需显式设置 `ListViewItem` 宽度 | `(index: number) => styleObject` | `ALL` |
| getRowType | 指定一个函数，在其中返回对应条目的类型（返回Number类型的自然数，默认是0），List 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升list 性能。 | `(index: number) => number` | `ALL` |
| getRowType | 指定一个函数，在其中返回对应条目的类型（返回Number类型的自然数，默认是0），List 将对同类型条目进行复用，所以合理的类型拆分，可以很好地提升 List 性能。`注意：同一 type 的 item 组件由于复用可能不会走完整组件创建生命周期` | `(index: number) => number` | `ALL` |
| horizontal | 指定 `ListView` 是否采用横向布局。`default: undefined` 纵向布局 | `boolean \| undefined` | `Android` |
| initialListSize | 指定在组件刚挂载的时候渲染多少行数据。用这个属性来确保首屏显示合适数量的数据，而不是花费太多帧时间逐步显示出来。 | `number` | `ALL` |
| initialContentOffset | 初始位移值。在列表初始化时即可指定滚动距离，避免初始化后再通过 scrollTo 系列方法产生的闪动。Android 在 `2.8.0` 版本后支持 | `number` | `ALL` |
Expand Down Expand Up @@ -246,7 +246,7 @@ import icon from './qb_icon_new.png';

> * x: number - X 偏移值
> * y: number - Y 偏移值
> * duration: number - 毫秒为单位的滚动时间
> * duration: number - 毫秒为单位的滚动时间，默认 1000ms
---

Expand Down Expand Up @@ -381,10 +381,10 @@ import icon from './qb_icon_new.png';
| onLayout | 当元素挂载或者布局改变的时候调用，参数为： `nativeEvent: { layout: { x, y, width, height } }`，其中 `x` 和 `y` 为相对父元素的坐标位置。 | `Function` | `ALL` |
| onClick | 当文本被点击以后调用此回调函数。 例如， `onClick={() => console.log('onClick') }` | `Function` | `ALL` |
| ellipsizeMode* | 当设定了 `numberOfLines` 值后，这个参数指定了字符串如何被截断。所以在使用 `ellipsizeMode` 时，必须得同时指定 `numberOfLines` 数值。 | `enum(head, middle, tail, clip)` | `Android 仅支持 tail 属性，iOS 全支持` |
| onTouchDown | 当用户开始触屏控件时（即用户在该控件上按下手指时），将回调此函数，并将触屏点信息作为参数传递进来； 参数为 `nativeEvent: { name, page_x, page_y, id }` | `Function` | `ALL` |
| onTouchMove | 当用户在控件移动手指时，此函数会持续收到回调，并通过event参数告知控件的触屏点信息；参数为 `nativeEvent: { name, page_x, page_y, id }` | `Function` | `ALL` |
| onTouchEnd | 当触屏操作结束，用户在该控件上抬起手指时，此函数将被回调，event参数也会通知当前的触屏点信息；参数为 `nativeEvent: { name, page_x, page_y, id }` | `Function` | `ALL` |
| onTouchCancel | 当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，触屏点信息也会通过event参数告知前端；参数为 `nativeEvent: { name, page_x, page_y, id }` | `Function` | `ALL` |
| onTouchDown | 当用户开始在控件上按下手指时，将回调此函数，并将触屏点信息作为参数传递进来； 参数为 `nativeEvent: { name, page_x, page_y, id }`, `page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置| `Function` | `ALL` |
| onTouchMove | 当用户在控件移动手指时，此函数会持续收到回调，并通过event参数告知控件的触屏点信息；参数为 `nativeEvent: { name, page_x, page_y, id }`，`page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置 | `Function` | `ALL` |
| onTouchEnd | 当触屏操作结束，用户在该控件上抬起手指时，此函数将被回调，event参数也会通知当前的触屏点信息；参数为 `nativeEvent: { name, page_x, page_y, id }`，`page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置 | `Function` | `ALL` |
| onTouchCancel | 当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，触屏点信息也会通过event参数告知前端；参数为 `nativeEvent: { name, page_x, page_y, id }`，`page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置 | `Function` | `ALL` |

* ellipsizeMode 的参数含义：
* `clip` - 超过指定行数的文字会被直接截断，不显示“...”；（仅iOS支持）
Expand All @@ -406,22 +406,18 @@ import icon from './qb_icon_new.png';
| ------------------ | ------------------------------------------------------------ | ------------------------------------ | --------- |
| accessible | 当此属性为 `true` 时，表示此视图时一个启用了无障碍功能的元素。启用无障碍的其他属性时，必须优先设置 `accessible` 为 `true`。 | `boolean` | `ALL` |
| accessibilityLabel | 设置当用户与此元素交互时，“读屏器”（对视力障碍人士的辅助功能）阅读的文字。默认情况下，这个文字会通过遍历所有的子元素并累加所有的文本标签来构建。 | `string` | `ALL` |
| collapsable | Android 里如果一个 `View` 只用于布局它的子组件，则它可能会为了优化而从原生布局树中移除，因此该节点 DOM 的引用会丢失 `（比如调用 measureInAppWindow 无法获取到大小和位置信息）`。 把此属性设为 `false` 可以禁用这个优化，以确保对应视图在原生结构中存在。`(也可设置为 Style 属性)` | `boolean` | `Android` |
| style | - | [`View Styles`](style/layout.md) | `ALL` |
| opacity | 配置 `View` 的透明度，同时会影响子节点的透明度 | `number` | `ALL` |
| overflow | 指定当子节点内容溢出其父级 `View` 容器时, 是否剪辑内容 | `enum(visible, hidden)` | `ALL` |
| nativeBackgroundAndroid | 配置水波纹效果，`最低支持版本 2.13.1`；配置项为 `{ borderless: boolean, color: Color, rippleRadius: number }`； `borderless` 表示波纹是否有边界，默认 false；`color` 波纹颜色；`rippleRadius` 波纹半径，若不设置，默认容器边框为边界； `注意：设置水波纹后默认不显示，需要在对应触摸事件中调用 setPressed 和 setHotspot 方法进行水波纹展示，详情参考相关`[demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo/src/components/RippleViewAndroid/index.jsx) | `Object`| `Android` |
| onLayout | 当元素挂载或者布局改变的时候调用，参数为： `nativeEvent: { layout: { x, y, width, height } }`，其中 `x` 和 `y` 为相对父元素的坐标位置。 | `Function` | `ALL` |
| onAttachedToWindow | 这个事件会在节点已经渲染并且添加到容器组件中触发，因为 Hippy 的渲染是异步的，这是很稳妥的执行后续操作的事件。 | `Function` | `ALL` |
| onTouchDown | 当用户开始触屏控件时（即用户在该控件上按下手指时），将回调此函数，并将触屏点信息作为参数传递进来； 参数为 `nativeEvent: { name, page_x, page_y, id }` | `Function` | `ALL` |
| onTouchMove | 当用户在控件移动手指时，此函数会持续收到回调，并通过event参数告知控件的触屏点信息；参数为 `nativeEvent: { name, page_x, page_y, id }` | `Function` | `ALL` |
| onTouchEnd | 当触屏操作结束，用户在该控件上抬起手指时，此函数将被回调，event参数也会通知当前的触屏点信息；参数为 `nativeEvent: { name, page_x, page_y, id }` | `Function` | `ALL` |
| onTouchCancel | 当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，触屏点信息也会通过event参数告知前端；参数为 `nativeEvent: { name, page_x, page_y, id }` | `Function` | `ALL` |
| nativeBackgroundAndroid | 配置水波纹效果，`最低支持版本 2.13.1`；配置项为 `{ borderless: boolean, color: Color, rippleRadius: number }`； `borderless` 表示波纹是否有边界，默认 false；`color` 波纹颜色；`rippleRadius` 波纹半径，若不设置，默认容器边框为边界； `注意：设置水波纹后默认不显示，需要在对应触摸事件中调用 setPressed 和 setHotspot 方法进行水波纹展示，详情参考相关`[demo](//github.com/Tencent/Hippy/tree/master/examples/hippy-react-demo/src/components/RippleViewAndroid/index.jsx) | `Object`| `Android` |

## style 样式内特殊属性
| onTouchDown | 当用户开始在控件上按下手指时，将回调此函数，并将触屏点信息作为参数传递进来； 参数为 `nativeEvent: { name, page_x, page_y, id }`, `page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置| `Function` | `ALL` |
| onTouchMove | 当用户在控件移动手指时，此函数会持续收到回调，并通过event参数告知控件的触屏点信息；参数为 `nativeEvent: { name, page_x, page_y, id }`，`page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置 | `Function` | `ALL` |
| onTouchEnd | 当触屏操作结束，用户在该控件上抬起手指时，此函数将被回调，event参数也会通知当前的触屏点信息；参数为 `nativeEvent: { name, page_x, page_y, id }`，`page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置 | `Function` | `ALL` |
| onTouchCancel | 当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为hidden）、其他组件的滑动手势，此函数会收到回调，触屏点信息也会通过event参数告知前端；参数为 `nativeEvent: { name, page_x, page_y, id }`，`page_x` 和 `page_y` 分别表示点击在屏幕内的绝对位置 | `Function` | `ALL` |

| 参数 | 描述 | 类型 | 支持平台 |
| ------------------ | ------------------------------------------------------------ | ------------------------------------ | --------- |
| collapsable | Android 里如果一个 `View` 只用于布局它的子组件，则它可能会为了优化而从原生布局树中移除，因此该节点 DOM 的引用会丢失 `（比如调用 measureInAppWindow 无法获取到大小和位置信息）`。 把此属性设为 `false` 可以禁用这个优化，以确保对应视图在原生结构中存在。(也可设置为 Attribute 属性) | `boolean` | `Android` |

## 方法

Expand Down
2 changes: 1 addition & 1 deletion docs/hippy-react/gesture.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ render()

触屏事件的处理与点击事件类似，可以再任何 React 组件上使用，touch 事件主要由以下几个回调函数组成：

1. onTouchDown(event)：当用户开始触屏控件时（即用户在该控件上按下手指时），将回调此函数，并将触屏点信息作为参数传递进来；
1. onTouchDown(event)：当用户开始在控件上按下手指时，将回调此函数，并将触屏点信息作为参数传递进来；
2. onTouchMove(event)：当用户在控件移动手指时，此函数会持续收到回调，并通过 event 参数告知控件的触屏点信息；
3. onTouchEnd(event)：当触屏操作结束，用户在该控件上抬起手指时，此函数将被回调，event 参数也会通知当前的触屏点信息；
4. onTouchCancel(event)：当用户触屏过程中，某个系统事件中断了触屏，例如电话呼入、组件变化（如设置为 hidden）、其他组件的滑动手势，此函数会收到回调，触屏点信息也会通过 event 参数告知前端；
Expand Down
32 changes: 32 additions & 0 deletions docs/hippy-react/introduction.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,35 @@ hippy-react 是基于 Facebook React 的官方自定义渲染器 [react-reconcil
<img src="assets/img/hippy-react.png" alt="hippy-react 架构图" width="70%"/>
<br />
<br />

# 初始化

```javascript
import { Hippy, View } from '@hippy/react';
import React, { Component } from 'react';

new Hippy({
appName: 'Demo',
entryPage: App,
// set global bubbles, default is false
bubbles: false,
// set log output, default is false
silent: false,
}).start();

class App extends Component {
constructor(props) {
// 终端给前端的初始化参数，终端可以将一些启动需要的自定义属性放到入口文件props里
super(props);
}

render() {
const { __instanceId__: instanceId } = this.props;
console.log('instanceId', instanceId);
return (
<View></View>
);
}
}

```
Loading

0 comments on commit 487c1f3

Please sign in to comment.