时间戳

首页 > 解决方案 > 如何在 React Native 中使用选项卡制作视差滚动视图？

reactjs - 如何在 React Native 中使用选项卡制作视差滚动视图？

问题描述

我目前尝试使用标签栏制作一些滚动视图。

如果我向下滚动，标签栏固定在顶部。

这是我想要的例子。

https://i.stack.imgur.com/ITZHJ.gif

如果你知道如何制作这个或我可以使用的 NPM，请让我知道你是否拥有它。

谢谢阅读！！

这是我自己尝试但失败了..

        <Animated.ScrollView
          scrollEventThrottle={5}
          showsVerticalScrollIndicator={false}
          onScroll={Animated.event(
            [{nativeEvent: {contentOffset: {y: this.nScroll}}}],
            {useNativeDriver: true},
          )}
          style={{zIndex: 0}}>
          <Animated.View
            style={{
              transform: [
                {translateY: Animated.multiply(this.nScroll, 0.65)},
                {scale: this.imgScale},
              ],
              backgroundColor: THEME_COLOR,
            }}>

标签： reactjsreact-native

解决方案

您可以使用FlatList它stickyHeaderIndices={[0]}来保持ListHeaderComponent粘性，并且data传入取决于选项卡状态

const [ tab, setTab ] = useState(1)
// you should add at least keyExtractor and renderItem props...
<FlatList
    stickyHeaderIndices={[0]}
    ListHeaderComponent={ <Tabs setTab={setTab} /> } // create `Tabs` component of the nav, use `props.setTab` to change `tab` state
    data={ tab == 1 ? tab1data : tab2data } // assuming tab1data is array 
/>

更多关于FlatList https://reactnative.dev/docs/flatlist

推荐阅读