0

我正在使用 PanGestureHandler 并想注销正在跟踪的值。

在方法中使用 console.log 会call流式传输正确的值，但使用 setState 不会正确更新。

我尝试使用 ref 值而不是无济于事。

有人可以指出我正确的方向吗？

import React, { useState, useEffect } from 'react'
import { Text } from 'react-native'
import styled from 'styled-components/native'
import { Path, Svg } from 'react-native-svg'
import A from 'react-native-reanimated'
import { PanGestureHandler, State } from 'react-native-gesture-handler'

const { event, useCode, debug, call, block } = A

const Rotation = function App() {
  const translationX = new A.Value(0)
  const translationY = new A.Value(0)
  const [transX, setTransX] = useState(0)
  const gestureHandler = event([
    {
      nativeEvent: {
        translationX,
        translationY,
      },
    },
  ])

  useCode(
    () => call([translationX], ([translationX]) => setTransX(translationX)),
    [translationX]
  )

  return (
    <PanGestureHandler
      onGestureEvent={gestureHandler}
      onHandlerStateChange={gestureHandler}
    >
      <Wrapper>
        <OutputWrapper>
          <CoordsLabel>{transX}</CoordsLabel>
        </OutputWrapper>
      </Wrapper>
    </PanGestureHandler>
  )
}

const Wrapper = styled(A.View)`
  flex: 1;
  align-self: stretch;
  background-color: red;
`
const OutputWrapper = styled(A.View)`
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 80px;
  background-color: black;
  align-items: center;
  justify-content: center;
`
const CoordsLabel = styled(A.Text)`
  color: white;
`

export default Rotation
4

1 回答 1

1

我需要通过渲染来保持这些值。问题是 setState 调用导致动画值每次都重置，因此它永远不会从零开始移动。

记忆值解决了这个问题：

const { translationX, translationY } = useMemo(
  () => ({
    translationX: new A.Value(0),
    translationY: new A.Value(0),
  }),
  []
)

NB Memoizing withuseMemo并不是最好的方法，因为值不能保证按预期持续存在。选择useMemoOne或适应useRef生产时间。

于 2020-05-07T18:51:47.320 回答