react-native - 如何在 React Native 中使用 Animated API 同时隐藏 Header 和 Footer
问题描述
我只是想知道如何以相同的动画值同时隐藏页眉和页脚?
因为我认为我不能同时为动画多个组件使用相同的动画值。
我的组件
<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
值传输到选项卡导航器。
解决方案
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;
现场演示。
推荐阅读
- php - 如何从 php 中的 arangodb 事务返回值?
- react-native - react-native Linking.addEventListener回调使用this.setState错误
- sql - PostgreSQL 中的类型表是什么?我怎样才能制作这样的桌子?
- magento - Magneto,管理员表格准备了两次
- html - CSS网格空单元格布局问题
- php - Swift 4中的php字符串到数字
- java - 如何在读取文件时检测新行
- python - 变量的符号链接
- autohotkey - 在按键上启动/停止循环仅偶尔有效
- arm - 使用 arm LDM 指令将数据传输到用户模式寄存器