Appsのprops構文整理

This commit is contained in:
harukin-expo-dev-env 2024-08-20 02:17:05 +00:00
parent 7781cf43e8
commit 85519cf857

92
Apps.js
View File

@ -9,53 +9,47 @@ import { MenuPage } from "./MenuPage.js";
import { useAreaInfo } from "./stateBox/useAreaInfo.js";
import "./components/ActionSheetComponents/sheets.js";
const Tab = createBottomTabNavigator();
export function AppContainer() {
const { areaInfo, areaIconBadgeText } = useAreaInfo();
const navigationRef = React.useRef();
return (
<NavigationContainer name="Root" style={{ flex: 1 }} ref={navigationRef}>
<Tab.Navigator
tabBarOptions={{ keyboardHidesTabBar: Platform.OS === "android" }}
initialRouteName="menuPage"
lazy={false}
>
<Tab.Screen
name="login"
options={{
tabBarLabel: "位置情報",
headerTransparent: true,
gestureEnabled: true,
tabBarIcon: initIcon("barchart", "AntDesign"),
}}
>
{(props) => <Top {...props} navigationRef={navigationRef} />}
</Tab.Screen>
<Tab.Screen
name="menuPage"
options={{
tabBarLabel: "リンク",
headerTransparent: true,
gestureEnabled: true,
tabBarIcon: initIcon("radio", "Ionicons"),
}}
component={MenuPage}
/>
<Tab.Screen
name="home"
options={{
tabBarLabel: "運行情報",
headerTransparent: true,
gestureEnabled: true,
tabBarIcon: initIcon("train", "Ionicons"),
tabBarBadge: areaInfo ? areaIconBadgeText : undefined,
}}
>
{(props) => <TNDView {...props} />}
</Tab.Screen>
</Tab.Navigator>
</NavigationContainer>
);
}
const Tab = createBottomTabNavigator();
const { areaInfo, areaIconBadgeText } = useAreaInfo();
const navigationRef = React.useRef();
const getTabProps = (name, label, icon, iconFamily, tabBarBadge) => ({
name,
options: {
tabBarLabel: label,
headerTransparent: true,
gestureEnabled: true,
tabBarIcon: initIcon(icon, iconFamily),
tabBarBadge,
},
});
return (
<NavigationContainer name="Root" style={{ flex: 1 }} ref={navigationRef}>
<Tab.Navigator
tabBarOptions={{ keyboardHidesTabBar: Platform.OS === "android" }}
initialRouteName="menuPage"
lazy={false}
>
<Tab.Screen
{...getTabProps("login", "位置情報", "barchart", "AntDesign")}
children={(props) => <Top {...props} navigationRef={navigationRef} />}
/>
<Tab.Screen
{...getTabProps("menuPage", "リンク", "radio", "Ionicons")}
component={MenuPage}
/>
<Tab.Screen
{...getTabProps(
"home",
"運行情報",
"train",
"Ionicons",
areaInfo ? areaIconBadgeText : undefined
)}
children={(props) => <TNDView {...props} />}
/>
</Tab.Navigator>
</NavigationContainer>
);
}