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

kyvafyod  于 6个月前  发布在  React
关注(0)|答案(1)|浏览(88)

我想创建一个动画标签菜单来学习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?如果使用marginpadding Package 布局,则布局会中断。换句话说:是否需要基于索引的定位?我宁愿有相对的路线使用菜单,无论我想。然而,我对react-native-reanimated相当缺乏经验,我不知道这是一个不错的想法还是只是愚蠢的愿望。感谢您的任何反馈!

nhaq1z21

nhaq1z211#

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

const numberOfTabs = 3;
const tabWith = windowWidth / numberOfTabs;
const MARGIN_VERTICAL_CONTAINER = 10;
const MARGIN_HORIZONTAL_BUTTON = 15;

...

const selectedButtonAnimatedStyle = useAnimatedStyle(() => {
  return {
    position: "absolute",
    // adjust here for MARGIN_HORIZONTAL_BUTTON
    left: position.value,
    right: 0,
    top: 0, 
    // adjust here for MARGIN_VERTICAL_CONTAINER
    width: tabWith,
  };
});

字符串

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

相关问题