我想创建一个动画标签菜单来学习react-native-reanimated。下面是我的完整代码:
import { View, StyleSheet, Text, Pressable, Dimensions } from "react-native";
import Animated, {
useAnimatedStyle,
useSharedValue,
withSpring,
} from "react-native-reanimated";
const numberOfTabs = 3;
const windowWidth = Dimensions.get("window").width;
const tabWith = windowWidth / numberOfTabs;
export default function App() {
const position = useSharedValue(0);
const indexArray = [];
for (let index = 0; index < numberOfTabs; index++) {
indexArray.push(index);
}
const selectedButtonAnimatedStyle = useAnimatedStyle(() => {
return {
position: "absolute",
left: position.value,
right: 0,
top: 0,
width: tabWith,
};
});
const handlePress = (index) => {
position.value = withSpring(tabWith * index);
};
return (
<View style={styles.container}>
<View style={styles.buttonGroup}>
<Animated.View
style={[styles.selectedButton, selectedButtonAnimatedStyle]}
/>
{indexArray.map((i) => (
<Pressable
key={i}
style={styles.menuButton}
onPress={() => handlePress(i)}>
<Text>category {i}</Text>
</Pressable>
))}
</View>
</View>
);
}
const styles = StyleSheet.create({
menuButton: {
width: tabWith,
alignItems: "center",
justifyContent: "center",
},
selectedButton: {
backgroundColor: "green",
height: "100%",
},
buttonGroup: {
flex: 1,
width: "100%",
flexDirection: "row",
maxHeight: 50,
},
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
width: "100%",
//margin: 10, //add this to break
},
});
字符串
世博小吃运行及修改代码:https://snack.expo.dev/@tomwaitforitmy/tab-menu
是否需要position: "absolute"
和/或Dimensions.get("window").width
?如果使用margin
或padding
Package 布局,则布局会中断。换句话说:是否需要基于索引的定位?我宁愿有相对的路线使用菜单,无论我想。然而,我对react-native-reanimated相当缺乏经验,我不知道这是一个不错的想法还是只是愚蠢的愿望。感谢您的任何反馈!
1条答案
按热度按时间nhaq1z211#
PRO提示:不要使用
Dimensions.get("window").width;
如果你的用户将从纵向更改为横向,打开他的可折叠屏幕或出于某种原因“更改屏幕尺寸”,你不会对这种变化做出React。我需要重构我所有的应用程序,因为这一点:)
移动组件内部的逻辑并使用用途:
const { width } = useWindowDimensions();
然后,你想出了一个非常聪明的主意。我认为没有其他方法,而不是使用定位,但你可以提供一些修复的利润率,如果你定义他们togheter与所有你的东西
字符串
flex: 1
按钮和你的“选择指示器”只为“一个flex,而不是所有三个”。但这只是响亮的想法。*