Files
Hippy/docs/hippy-react/migrate-from-rn.md
T
2021-09-28 23:59:29 +08:00

1.5 KiB

从 React Native 迁移

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

触屏 Touchable 系列组件

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

import React from 'react';

function TouchableWithoutFeedback(props) {
  const child = React.Children.only(props.children);
  const { onClick, onPressIn, onPressOut } = props;
  const { children, ...nativeProps } = child.props;
  // 透传事件
  if (typeof onClick === 'function') {
    nativeProps.onClick = onClick;
  }
  if (typeof onPressIn === 'function') {
    nativeProps.onPressIn = onPressIn;
  }
  if (typeof onPressOut === 'function') {
    nativeProps.onPressOut = onPressOut;
  }
  return React.cloneElement(child, nativeProps, children);
}

动画系统

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

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

手势系统

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

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