harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add new action

Browse Source
This commit is contained in:
harukin-expo-dev-env 2025-02-04 12:18:54 +00:00
parent ceffd2da7e
commit e04cfb9a8b
2 changed files with 63 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Apps.js
View File

@ -14,15 +14,13 @@ export function AppContainer() {
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
const { areaInfo, areaIconBadgeText, isInfo } = useAreaInfo(); const { areaInfo, areaIconBadgeText, isInfo } = useAreaInfo();
const navigationRef = React.useRef(); const navigationRef = React.useRef();
const getTabProps = (name, label, icon, iconFamily, tabBarBadge, style) => ({ const getTabProps = (name, label, icon, iconFamily, tabBarBadge, isInfo) => ({
name, name,
options: { options: {
tabBarLabel: label, tabBarLabel: label,
headerShown: false, headerShown: false,
gestureEnabled: true, gestureEnabled: true,
tabBarIcon: initIcon(icon, iconFamily), tabBarIcon: initIcon(icon, iconFamily,tabBarBadge,isInfo),
tabBarBadge,
tabBarBadgeStyle: style,
}, },
}); });
@ -38,7 +36,6 @@ export function AppContainer() {
screenOptions={{ screenOptions={{
lazy: false, lazy: false,
animation: "shift", animation: "shift",
tabBarVariant: "uikit",
}} }}
detachInactiveScreens={false} detachInactiveScreens={false}
lazy={false} lazy={false}
@ -59,10 +56,7 @@ export function AppContainer() {
"train", "train",
"Ionicons", "Ionicons",
areaInfo ? areaIconBadgeText : undefined, areaInfo ? areaIconBadgeText : undefined,
isInfo && { isInfo
backgroundColor: "#00b8ff",
color: "white",
}
)} )}
children={TNDView} children={TNDView}
/> />

68
lib/initIcon.tsx
View File

@ -1,20 +1,72 @@
import React from "react"; import React, { FC } from "react";
import { Ionicons, AntDesign } from "@expo/vector-icons"; import { Ionicons, AntDesign } from "@expo/vector-icons";
import { Text, View } from "react-native";
type name = keyof typeof Ionicons.glyphMap & keyof typeof AntDesign.glyphMap; type name = keyof typeof Ionicons.glyphMap & keyof typeof AntDesign.glyphMap;
type type = "Ionicons" | "AntDesign"; type type = "Ionicons" | "AntDesign";
export const initIcon = (name: name, type:type) => { export const initIcon = (
name: name,
type: type,
tabBarBadge: string,
isInfo: boolean
) => {
switch (type) { switch (type) {
case "Ionicons": case "Ionicons":
return ({ focused, color, size }) => ( return ({ focused, color, size }) => (
<Ionicons name={name} size={30} color={focused ? "#0099CC" : "black"} /> <>
{!!tabBarBadge && <Badge tabBarBadge={tabBarBadge} isInfo={isInfo} />}
<Ionicons
name={name}
size={30}
color={focused ? "#0099CC" : "black"}
/>
</>
); );
case "AntDesign": case "AntDesign":
return ({ focused, color, size }) => ( return ({ focused, color, size }) => (
<AntDesign <>
name={name} {!!tabBarBadge && <Badge tabBarBadge={tabBarBadge} isInfo={isInfo} />}
size={30} <AntDesign
color={focused ? "#0099CC" : "black"} name={name}
/> size={30}
color={focused ? "#0099CC" : "black"}
/>
</>
); );
} }
}; };
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>
);
};