如何在 React Native 中使用 Animated API 同时隐藏 Header 和 Footer

Posted 2023-03-24

【中文标题】如何在 React Native 中使用 Animated API 同时隐藏 Header 和 Footer

【英文标题】：How to hide Header and Footer at the same time with the Animated API in React Native

【发布时间】：2021-03-22 01:07:35

【问题描述】：

我只是想知道如何以相同的动画值同时隐藏页眉和页脚？

因为我认为我不能同时为动画多个组件使用相同的动画值。

我的组件

<SafeAreaView style= flex: 1 >
            <Animated.View
                style=
                    transform: [ translateY ],
                    position: "absolute",
                    top: 0,
                    left: 0,
                    zIndex: 100,
                    width: "100%",
                
            >
                <MainHeader logo="socialLogo" navigation=navigation />
            </Animated.View>
            <Animated.FlatList
                ref=ref
                onEndReachedThreshold=0.5
                contentContainerStyle= paddingTop: HEADER_HEIGHT 
                bounces=false
                onScroll=handleScroll
                nestedScrollEnabled=true
                ListHeaderComponent=<Stories data=data app=app />
                pinchGestureEnabled=false
                ListEmptyComponent=<FeedItemLazy />
                onMomentumScrollEnd=handleSnap
                scrollEventThrottle=16
                renderScrollComponent=(props) => <ScrollView ...props />
                showsVerticalScrollIndicator=false
                maxToRenderPerBatch=10
                onEndReached=() => 
                    props.social.getFeeds.executeNext( lastID: lastId );
                
                refreshControl=
                    <RefreshControl
                        refreshing=isRefreshing
                        onRefresh=handleRefresh
                    />
                
                data=data
                renderItem=( item, index ) => (
                    <>
                        <FeedItem
                            data=item
                            app=app
                            navigation=navigation
                            social=social
                        />
                        <Separator height=2 />
                    </>
                )
                keyExtractor=(item) => item._id
            />
            social.getFeeds.isExecuting && (
                <LottieView
                    source=require("../../../../assets/animation/16337-banana-loader.json")
                    loop
                    autoPlay
                    style= width: 50, height: 50 
                />
            )
            <ModalSelector navigation=navigation />
        </SafeAreaView>

这是一个 Feed 组件。平面列表中列出了用户提要，我的目标是当用户向下滚动时，使 MainHeader 和 Bottom 选项卡可折叠。我认为最难的部分是让底部标签不可见，因为它们直接来自react-navigation v5。来自createBottomTabNavigator。我不知道如何将translateY 值转移到标签导航器。

【问题讨论】：

你可以使用相同的值。

【参考方案1】：

import React from 'react';
import 
  Animated,
  Easing,
  Button,
  View,
  StyleSheet,
  Text,
  TouchableOpacity,
 from 'react-native';

const App = () => 
  const animatedValue = React.useRef(new Animated.Value(0)).current;
  const [hidden, setHidden] = React.useState(false);

  const startAnimation = (toValue) => 
    Animated.timing(animatedValue, 
      toValue: hidden ? 0 : 1,
      duration: 700,
      easing: Easing.linear,
      useNativeDriver: true,
    ).start(() => setHidden(!hidden));
  ;

  const translateY = animatedValue.interpolate(
    inputRange: [0, 1],
    outputRange: [0, -50],
    extrapolate: 'clamp',
  );

  return (
    <View style= flex: 1 >
      <Animated.View
        style=[styles.item,  top: 0, transform: [ translateY ] ]
      />
      <TouchableOpacity
        style=styles.button
        onPress=startAnimation.bind(null, 1 - animatedValue.__value)>
        <Text>Hide</Text>
      </TouchableOpacity>
      <Animated.View
        style=[
          styles.item,
          
            bottom: 0,
            transform: [ translateY: Animated.multiply(translateY, -1) ],
          ,
        ]
      />
    </View>
  );
;

const styles = StyleSheet.create(
  item: 
    width: '100%',
    height: 50,
    position: 'absolute',
    backgroundColor: 'red',
  ,
  button: 
    width: '50%',
    height: 50,
    backgroundColor: 'pink',
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'center',
    borderRadius: 25,
    position: 'absolute',
    top: 200,
  ,
);

export default App;

直播Demo.

【讨论】：

这不是我想要的，但帮助我达到了我想要的程度。谢谢

Gonsadze，我怎么能用 diffClamp 和滚动事件而不是点击做同样的伎俩？

明天再写，这里已经很晚了。

编辑了描述

要隐藏页眉吗？