react-native - 在 React Native 中翻译 ScrollView 内的 View

Question

我正在尝试在我的 RN 应用程序中构建这个粘性标题导航栏。基本上，类别的水平 ScrollView 基于 Y 滚动突出显示当前类别。

感谢伟大的 William Candillon (https://www.youtube.com/watch?v=xutPT1oZL2M&t=1369s) 的视频，我已经很接近了，但我有一个主要问题。

我在滚动时使用插值来平移类别 View 的 X 位置。然后我有一个 ScrollView 包装这个动画 View 。问题是 Scrollview 没有功能，因为它没有动画 View 位置的引用。正如您在下面的 gif 中看到的(蓝色 -> Animated.View/红色 -> Scrollview)

我喜欢插值方法，因为它是声明式的并且在 native 线程上运行，所以我尽量避免创建附加到 scrollTo() 函数的监听器。

您会考虑哪种方法？

export default ({ y, scrollView, tabs }) => {
  const index = new Value(0);

  const [measurements, setMeasurements] = useState(
    new Array(tabs.length).fill(0)
  );

  const indexTransition = withTransition(index);

  const width = interpolate(indexTransition, {
    inputRange: tabs.map((_, i) => i),
    outputRange: measurements
  });

  const translateX = interpolate(indexTransition, {
    inputRange: tabs.map((_tab, i) => i),
    outputRange: measurements.map((_, i) => {
      return (
        -1 *
          measurements
            .filter((_measurement, j) => j < i)
            .reduce((acc, m) => acc + m, 0) -
        8 * i
      );
    })
  });

  const style = {
    borderRadius: 24,
    backgroundColor: 'black',
    width,
    flex: 1
  };

  const maskElement = <Animated.View {...{ style }} />;

  useCode(
    () =>
      block(
        tabs.map((tab, i) =>
          cond(
            i === tabs.length - 1
              ? greaterOrEq(y, tab.anchor)
              : and(
                  greaterOrEq(y, tab.anchor),
                  lessOrEq(y, tabs[i + 1].anchor)
                ),
            set(index, i)
          )
        )
      ),
    [index, tabs, y]
  );
  return (
    <Animated.View style={[styles.container, {}]}>
      <Animated.ScrollView
        scrollEventThrottle={16}
        horizontal
        style={{ backgroundColor: 'red', flex: 1 }}
      >
        <Animated.View
          style={{
            transform: [{ translateX }],
            backgroundColor: 'blue'
          }}
        >
          <Tabs
            onPress={i => {
              if (scrollView) {
                scrollView.getNode().scrollTo({ y: tabs[i].anchor + 1 });
              }
            }}
            onMeasurement={(i, m) => {
              measurements[i] = m;
              setMeasurements([...measurements]);
            }}
            {...{ tabs, translateX }}
          />
        </Animated.View>
      </Animated.ScrollView>
    </Animated.View>
  );
};

Answer 1

对于遇到此问题的任何人，我通过在动画 ScrollView 上添加以下内容以自动滚动到事件选项卡来解决此问题

// Tabs.tsx
 const scrollH = useRef<Animated.ScrollView>(null);
  
 let lastScrollX = new Animated.Value<number>(0);

 //Here's the magic code to scroll to active tab
 //translateX is the animated node value from the position of the active tab
 
  useCode(
    () => block(
      [cond(
        or(greaterThan(translateX, lastScrollX), lessThan(translateX, lastScrollX)),
        call([translateX], (tranX) => {
          if (scrollH.current && tranX[0] !== undefined) {
            scrollH.current.scrollTo({ x: tranX[0], animated: false });
          }
        })),
      set(lastScrollX, translateX)
      ])
    , [translateX]);

// Render the Animated.ScrollView
  return (
    <Animated.ScrollView
      horizontal
      ref={scrollH}
      showsHorizontalScrollIndicator={false}
      >{tabs.map((tab, index) => (
    <Tab ..../> ..... </Animated.ScrollView>