[react native]tab bar 메뉴를 만들어보자

코드왕·2024년 1월 14일
  1. tab bar를 TouchableOpacity로 만들어보자
const [activeSort, setActiveSort] = useState("Popular");
....

      <View className="flex-row justify-around items-center mx-4 bg-neutral-100 rounded-full p-2 px-4 space-x-2">
        {sortCategoryData.map((sort, index) => {
          let isActive = sort == activeSort;
          let activeButtonClass = isActive ? "bg-white shadow" : "";
          return (
              <TouchableOpacity
                onPress={() => {
                  setActiveSort(sort);
                }}
                key={index}
                className={`p-3 px-4 rounded-full flex ${activeButtonClass}`}
              >
                <Text className="font-bold">{sort}</Text>
              </TouchableOpacity>
            
          );
        })}
      </View>
profile
CODE DIVE!

0개의 댓글