如何让Victory Native图表实现自然的惯性滚动？

要解决滑动松开后图表立即停止的问题，只需在VictoryZoomContainer组件中添加inertia={true}属性即可开启惯性滚动。如果需要调整惯性减速的快慢，还可以搭配friction参数（默认值0.9，数值越小减速越快）。

修改后的容器组件代码 #

const getContainerComponent = () => {
  return (
    <VictoryZoomContainer 
          allowZoom={false}
          allowPan={true}
          zoomDimension="x"
          zoomDomain={{x: [props.data.length - 7, props.data.length]}}
          minimumZoom={{x: 1}}
          clipContainerComponent={<VictoryClipContainer />}
          inertia={true} // 开启惯性滚动
          friction={0.85} // 可选：调整减速速率，按需修改
        />
  )
}

完整代码示例 #

const getContainerComponent = () => {
  return (
    <VictoryZoomContainer 
          allowZoom={false}
          allowPan={true}
          zoomDimension="x"
          zoomDomain={{x: [props.data.length - 7, props.data.length]}}
          minimumZoom={{x: 1}}
          clipContainerComponent={<VictoryClipContainer />}
          inertia={true}
          friction={0.85}
        />
  )
}

return ( 
  <VictoryChart 
    theme={theme}
    minDomain={{ y: 0 }}
    containerComponent={ getContainerComponent() }
    domainPadding={{ x : [10, 10] }}
    >
    <VictoryAxis 
      dependentAxis 
      tickFormat={(t: number) => `${Math.round(t)}`}
      crossAxis={false}
    />

    <VictoryAxis
      tickLabelComponent={ <VictoryLabel dy={10} />}
     />

    <VictoryBar 
      data={arrayOfData} 
      x="timePeriod"
      y="amount"
      alignment="middle"
      barWidth={25}
      cornerRadius={{ top:12, bottom: 12 }}
      />
  </VictoryChart> 
)

内容的提问来源于stack exchange，提问作者MendyK