跳至主要内容

使用 React Native Gesture Handler

React Native Gesture Handler 提供原生驅動的手勢管理 API,用於在 React Native 中構建最佳的基於觸控的體驗。 從 1.1.0 版本開始,您可以使用它來處理手勢,而不是 PanResponder。

安裝

yarn add react-native-gesture-handler

安裝後,用包裹你的入口點<GestureHandlerRootView>gestureHandlerRootHOC

例如:

import { GestureHandlerRootView } from 'react-native-gesture-handler';
export default function App() {
return <GestureHandlerRootView style={{ flex: 1 }}>{/* content */}</GestureHandlerRootView>;
}

有關更多資訊,請參閱 React Native Gesture Handler 安裝

用法

useRNGH 屬性新增至 SkiaChart/SvgChart 組件。

import { SkiaChart } from '@wuba/react-native-echarts';

export default function App() {
return <SkiaChart useRNGH />;
}

請注意,當未安裝 react-native-gesture-handler 或 useRNGH 設定為 false 時,元件將正常回退到使用內建 PanResponder。

自定義手勢

自訂手勢僅在 useRNGH 設為 true 時才可用。

從 v1.2.0 版本開始,您可以透過 gesture 屬性指定自訂手勢。

它可以接受:

  • 手勢
  • 一個手勢陣列
  • 組合手勢
  • 返回手勢、手勢陣列或組合手勢的回調函數。它將為您提供兩個參數:
    • defaultGestures,這是由React Native ECharts設置的默認手勢。
    • dispatchEvents,這是一個向ZRender發送事件的函數。(僅在複雜情況下才需要使用)

如果 gesture 屬性是手勢陣列或返回手勢陣列,它們將組成種族手勢

Examples