0

我正在从react-native-reanimateduseAnimatedScrollHandler调用钩子来处理我在. 这个钩子按预期工作，但我现在想禁用基于which is a的自定义按钮（My FlatButton） 。但是当 sharedValue 改变时，屏幕不会重新渲染，因为状态没有改变，所以我的按钮的外观保持不变。 有没有办法强制在工作集内重新渲染，或者是否可以使用强制从工作集内重新渲染？onScrollAnimated.ScrollViewcurrentIndexsharedValue
useState

const scrollHandler = useAnimatedScrollHandler((event) => {
  translationX.value = event.contentOffset.x
  if (event.contentOffset.x < width * 0.5 && currentIndex.value != 0) {
    currentIndex.value = 0
  } else if (
    event.contentOffset.x > width * 0.5 &&
    event.contentOffset.x < width * 1.5 &&
    currentIndex.value != 1
  ) {
    currentIndex.value = 1
  } else if (event.contentOffset.x > width * 1.5 && currentIndex.value != 2) {
    currentIndex.value = 2
  }
})

<FlatButton
  label="Next"
  disabled={
    (currentIndex.value == 0 && (!firstName || !lastName)) ||
    (currentIndex.value == 1 && (!dateOfBirth || !sex)) ||
    (currentIndex.value == 2 &&
      (!streetNumber || !postalCode || !city || !state || !country))
  }
  onPress={() => {
    if (currentIndex.value == 0) {
      scrollRef.current
        ?.getNode()
        .scrollTo({ x: width, animated: true })
    } else if (currentIndex.value == 1) {
      scrollRef.current?.getNode().scrollToEnd({ animated: true })
    }
  }}
/>
4

1 回答 1

1

我刚刚发现 reanimated 提供了runOnJS函数，它可以像setState在 worklet 中一样运行 javscript 函数。所以只需创建一个包装函数，就像在我的例子toggleIndex中，你与你的状态交互并runOnJS从你的工作集内部调用这个函数。

const [currentIndex, setCurrentIndex] = useState(0)

const toggleIndex = (index: number) => {
  setCurrentIndex(index)
}

const scrollHandler = useAnimatedScrollHandler((event) => {
  translationX.value = event.contentOffset.x
  if (event.contentOffset.x < width * 0.5 && currentIndex != 0) {
    runOnJS(toggleIndex)(0)
  } else if (
    event.contentOffset.x > width * 0.5 &&
    event.contentOffset.x < width * 1.5 &&
    currentIndex != 1
  ) {
    runOnJS(toggleIndex)(1)
  } else if (event.contentOffset.x > width * 1.5 && currentIndex != 2) {
    runOnJS(toggleIndex)(2)
  }
})
于 2021-08-16T10:10:34.827 回答