我怎样才能用ReactNative制作像CollapsingToolbarLayout这样的视图？

Question

我想要制作像this这样的视图，或者像这样video

我使用了 react-native-collapsible-tab-view 但它有错误。

我可以用react-native-reanimated和react-native-gesture-handler来实现吗？

这是页面结构

<View>
  <Animated.View>
    <FastImage
    style={{weidth: '100%', height: '200'}}
    source={{
      uri: 'some_image.jpg',
    }}
  />
  </Animated.View>
  <Animated.View>
    <TabsProvider defaultIndex={0}>
      <Tabs>
        <TabScreen label='Tab1'>
          <ScrollView>
            <Text>SomeViews</Text>
          </ScrollView>
        </TabScreen>
        <TabScreen label='Tab2'>
          <ScrollView>
            <Text>SomeViews</Text>
          </ScrollView>
        </TabScreen>
      </Tabs>
    </TabsProvider>
  </Animated.View>
</View>

Answer 1

你可以

• 将 onScroll 属性传递给 ScrollView 形式“react-native”或 “反应本机手势处理程序”，
• 使用“react-native-reanimated”中的 useSharedValue 并更新它 处理滚动，
• 将共享值添加到“react-native-reanimated”中的useAnimatedStyle，并且
• 将animStyle传递到封面视图。

示例：

  const animProgress = useSharedValue(0);

  const handleScroll = ({ nativeEvent }) => {
    animProgress.value = Math.min(1, nativeEvent.contentOffset.y / disapearLimit);
  };

  const animStyle = useAnimatedStyle(() => ({
    transform: [{ scaleY: 1 + animProgress.value * (disapearLimit / coverHeight - 1) }],
    opacity: 1 - animProgress.value,
  }));

  return (
    <View>
      <Animated.View style={[styles.coverViewWithAbsolutePosition, animStyle]}>
        <View>
          <ScrollView onScroll={handleScroll} scrollEventThrottle={16}>
            {children}
          </ScrollView>
        </View>
      </Animated.View>
    </View>
  );