harukin-expo-dev-env
c8f1d6d332
- responsive.ts: スケーリングファクターを大幅強化（fontScale 0.8, moderateScale 0.8） - initIcon: タブバーアイコンsize 30→moderateScale(30) - SimpleDot: ドットサイズ20/14→moderateScale - StationPagination: 全寸法(28/24/18/22/8/6)をmoderateScale/fontScale化 - CarouselBox: fontSize 20/14→fontScale - MenuPage: マップオフセット100/80/10/30→verticalScale - menu: スクロールオフセット/snapToOffsets→verticalScale
60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import React, { FC } from "react";
|
|
import { Ionicons, AntDesign } from "@expo/vector-icons";
|
|
import { Text, View } from "react-native";
|
|
import { useResponsive } from "@/lib/responsive";
|
|
type IconName = string;
|
|
type IconType = "Ionicons" | "AntDesign";
|
|
export const initIcon = (
|
|
name: IconName,
|
|
type: IconType,
|
|
tabBarBadge?: string,
|
|
isInfo?: boolean
|
|
) => {
|
|
const IconComponent = type == "Ionicons" ? Ionicons : AntDesign;
|
|
return ({ focused, color, size }) => {
|
|
const { moderateScale } = useResponsive();
|
|
return (
|
|
<>
|
|
{!!tabBarBadge && <Badge tabBarBadge={tabBarBadge} isInfo={isInfo} />}
|
|
<IconComponent name={name as any} size={moderateScale(30)} color={color} />
|
|
</>
|
|
);
|
|
};
|
|
};
|
|
type BadgeProps = { tabBarBadge: string; isInfo: boolean };
|
|
|
|
export const Badge: FC<BadgeProps> = ({ tabBarBadge, isInfo }) => {
|
|
return (
|
|
<View
|
|
style={{
|
|
position: "relative",
|
|
top: -5,
|
|
right: 0,
|
|
zIndex: 100,
|
|
padding: 1,
|
|
width: 0,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
backgroundColor: isInfo ? "#00b8ff" : "red",
|
|
borderRadius: 10,
|
|
padding: 2,
|
|
shadowColor: "#000",
|
|
shadowOffset: { width: 0, height: 0 },
|
|
shadowOpacity: 0.5,
|
|
shadowRadius: 4,
|
|
elevation: 2,
|
|
}}
|
|
>
|
|
<Text style={{ color: "white", paddingHorizontal: 4 }}>
|
|
{tabBarBadge}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|