从 React Native 迁移

Hippy React 基本兼容 React Native 语法,但相对 React Native 提供的组件,Hippy 更加内聚,除了部分组件可能需要通过前端重新实现,主要还有以下三个区别:

触屏 Touchable 系列组件

Hippy 的触屏系列事件可以直接绑定到 View 上,之前 RN 上的 Touchable 系列组件其实可以简单迁移过来。以 TouchableWithoutFeedback 为例:

  1. import React from 'react';
  2. function TouchableWithoutFeedback(props) {
  3. const child = React.Children.only(props.children);
  4. const { onClick, onPressIn, onPressOut } = props;
  5. const { children, ...nativeProps } = child.props;
  6. // 透传事件
  7. if (typeof onClick === 'function') {
  8. nativeProps.onClick = onClick;
  9. }
  10. if (typeof onPressIn === 'function') {
  11. nativeProps.onPressIn = onPressIn;
  12. }
  13. if (typeof onPressOut === 'function') {
  14. nativeProps.onPressOut = onPressOut;
  15. }
  16. return React.cloneElement(child, nativeProps, children);
  17. }

动画系统

Hippy 的动画机制和 React Native 机制有所不同,React Native 的动画模块其实是由前端通过定时器驱动,存在大量前终端通讯,而 Hippy 通过将动画方案一次性下发给终端实现了更好的动画性能。

请参考 动画方案的最佳实践

手势系统

和 React Native 的 PanResponder 不同,Hippy 的手势事件可以应用于任何一个组件上,更加接近浏览器的实现。

请参考 手势系统的最佳实践