React-native-reanimated标签菜单:我需要绝对位置吗?

kyvafyod  于 2023-11-21  发布在  React
关注(0)|答案(1)|浏览(194)

我想创建一个动画标签菜单来学习react-native-reanimated。下面是我的完整代码:

  1. import { View, StyleSheet, Text, Pressable, Dimensions } from "react-native";
  2. import Animated, {
  3. useAnimatedStyle,
  4. useSharedValue,
  5. withSpring,
  6. } from "react-native-reanimated";
  7. const numberOfTabs = 3;
  8. const windowWidth = Dimensions.get("window").width;
  9. const tabWith = windowWidth / numberOfTabs;
  10. export default function App() {
  11. const position = useSharedValue(0);
  12. const indexArray = [];
  13. for (let index = 0; index < numberOfTabs; index++) {
  14. indexArray.push(index);
  15. }
  16. const selectedButtonAnimatedStyle = useAnimatedStyle(() => {
  17. return {
  18. position: "absolute",
  19. left: position.value,
  20. right: 0,
  21. top: 0,
  22. width: tabWith,
  23. };
  24. });
  25. const handlePress = (index) => {
  26. position.value = withSpring(tabWith * index);
  27. };
  28. return (
  29. <View style={styles.container}>
  30. <View style={styles.buttonGroup}>
  31. <Animated.View
  32. style={[styles.selectedButton, selectedButtonAnimatedStyle]}
  33. />
  34. {indexArray.map((i) => (
  35. <Pressable
  36. key={i}
  37. style={styles.menuButton}
  38. onPress={() => handlePress(i)}>
  39. <Text>category {i}</Text>
  40. </Pressable>
  41. ))}
  42. </View>
  43. </View>
  44. );
  45. }
  46. const styles = StyleSheet.create({
  47. menuButton: {
  48. width: tabWith,
  49. alignItems: "center",
  50. justifyContent: "center",
  51. },
  52. selectedButton: {
  53. backgroundColor: "green",
  54. height: "100%",
  55. },
  56. buttonGroup: {
  57. flex: 1,
  58. width: "100%",
  59. flexDirection: "row",
  60. maxHeight: 50,
  61. },
  62. container: {
  63. flex: 1,
  64. alignItems: "center",
  65. justifyContent: "center",
  66. width: "100%",
  67. //margin: 10, //add this to break
  68. },
  69. });

字符串
世博小吃运行及修改代码:https://snack.expo.dev/@tomwaitforitmy/tab-menu
是否需要position: "absolute"和/或Dimensions.get("window").width?如果使用marginpadding Package 布局,则布局会中断。换句话说:是否需要基于索引的定位?我宁愿有相对的路线使用菜单,无论我想。然而,我对react-native-reanimated相当缺乏经验,我不知道这是一个不错的想法还是只是愚蠢的愿望。感谢您的任何反馈!

nhaq1z21

nhaq1z211#

PRO提示:不要使用Dimensions.get("window").width;
如果你的用户将从纵向更改为横向,打开他的可折叠屏幕或出于某种原因“更改屏幕尺寸”,你不会对这种变化做出React。我需要重构我所有的应用程序,因为这一点:)
移动组件内部的逻辑并使用用途:const { width } = useWindowDimensions();
然后,你想出了一个非常聪明的主意。我认为没有其他方法,而不是使用定位,但你可以提供一些修复的利润率,如果你定义他们togheter与所有你的东西

  1. const numberOfTabs = 3;
  2. const tabWith = windowWidth / numberOfTabs;
  3. const MARGIN_VERTICAL_CONTAINER = 10;
  4. const MARGIN_HORIZONTAL_BUTTON = 15;
  5. ...
  6. const selectedButtonAnimatedStyle = useAnimatedStyle(() => {
  7. return {
  8. position: "absolute",
  9. // adjust here for MARGIN_HORIZONTAL_BUTTON
  10. left: position.value,
  11. right: 0,
  12. top: 0,
  13. // adjust here for MARGIN_VERTICAL_CONTAINER
  14. width: tabWith,
  15. };
  16. });

字符串

  • 也许,我再说一遍,也许你可以实现一些动画flex属性,例如制作三个flex: 1按钮和你的“选择指示器”只为“一个flex,而不是所有三个”。但这只是响亮的想法。*
展开查看全部

相关问题