xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(mobile): refactor TabBarPortal to use native wrapper component

This commit is contained in:
lawvs 2025-05-06 17:12:07 +08:00
parent cee212cb2f
commit 65291ff7f0
6 changed files with 12 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.android.tsx
View File

@ -1,35 +0,0 @@
import { requireNativeView } from "expo"
import { useSetAtom } from "jotai"
import { useContext } from "react"
import type { ViewProps } from "react-native"
import { StyleSheet, View } from "react-native"
import { BottomTabContext } from "./BottomTabContext"
const TabBarPortalNative = requireNativeView<ViewProps>("TabBarPortal")
export const TabBarPortal = ({ children }: { children: React.ReactNode }) => {
const { tabHeightAtom } = useContext(BottomTabContext)
const setTabHeight = useSetAtom(tabHeightAtom)
return (
// Use native view
<TabBarPortalNative style={styles.container}>
<View
onLayout={(e) => {
setTabHeight(e.nativeEvent.layout.height)
}}
>
{children}
</View>
</TabBarPortalNative>
)
}
const styles = StyleSheet.create({
container: {
position: "absolute",
bottom: 0,
left: 0,
right: 0,
},
})

34
apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.ios.tsx
View File

@ -1,34 +0,0 @@
import { requireNativeView } from "expo"
import { useSetAtom } from "jotai"
import { useContext } from "react"
import type { ViewProps } from "react-native"
import { StyleSheet, View } from "react-native"
import { BottomTabContext } from "./BottomTabContext"
const TabBarPortalNative = requireNativeView<ViewProps>("TabBarPortal")
export const TabBarPortal = ({ children }: { children: React.ReactNode }) => {
const { tabHeightAtom } = useContext(BottomTabContext)
const setTabHeight = useSetAtom(tabHeightAtom)
return (
<TabBarPortalNative style={styles.container}>
<View
onLayout={(e) => {
setTabHeight(e.nativeEvent.layout.height)
}}
>
{children}
</View>
</TabBarPortalNative>
)
}
const styles = StyleSheet.create({
container: {
position: "absolute",
bottom: 0,
left: 0,
right: 0,
},
})

5
apps/mobile/src/lib/navigation/bottom-tab/TabBarPortal.tsx
View File

@ -3,12 +3,13 @@ import { useContext } from "react"
import { StyleSheet, View } from "react-native"
import { BottomTabContext } from "./BottomTabContext"
import { TabBarPortalWrapper } from "./native"
export const TabBarPortal = ({ children }: { children: React.ReactNode }) => {
const { tabHeightAtom } = useContext(BottomTabContext)
const setTabHeight = useSetAtom(tabHeightAtom)
return (
<View style={styles.container}>
<TabBarPortalWrapper style={styles.container}>
<View
onLayout={(e) => {
setTabHeight(e.nativeEvent.layout.height)
@ -16,7 +17,7 @@ export const TabBarPortal = ({ children }: { children: React.ReactNode }) => {
>
{children}
</View>
</View>
</TabBarPortalWrapper>
)
}

4
apps/mobile/src/lib/navigation/bottom-tab/native.android.tsx Normal file
View File

@ -0,0 +1,4 @@
import { requireNativeView } from "expo"
import type { ViewProps } from "react-native"
export const TabBarPortalWrapper = requireNativeView<ViewProps>("TabBarPortal")

4
apps/mobile/src/lib/navigation/bottom-tab/native.ios.tsx Normal file
View File

@ -0,0 +1,4 @@
import { requireNativeView } from "expo"
import type { ViewProps } from "react-native"
export const TabBarPortalWrapper = requireNativeView<ViewProps>("TabBarPortal")

1
apps/mobile/src/lib/navigation/bottom-tab/native.tsx Normal file
View File

@ -0,0 +1 @@
export { View as TabBarPortalWrapper } from "react-native"