Browse Source

feat: tabs调整

master
kenan 1 month ago
parent
commit
33abbe21aa
  1. 20
      app/(tabs)/_layout.tsx
  2. 8
      app/(tabs)/activity.tsx
  3. 112
      app/(tabs)/explore.tsx
  4. 28
      app/(tabs)/mine.tsx
  5. 8
      app/(tabs)/recharge.tsx
  6. 10
      app/withdraw/index.tsx

20
app/(tabs)/_layout.tsx

@ -19,14 +19,28 @@ export default function TabLayout() {
<Tabs.Screen
name="index"
options={{
title: 'Home',
title: '首页',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
}}
/>
<Tabs.Screen
name="explore"
name="recharge"
options={{
title: 'Explore',
title: '充值',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
}}
/>
<Tabs.Screen
name="activity"
options={{
title: '活动',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
}}
/>
<Tabs.Screen
name="mine"
options={{
title: '我的',
tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
}}
/>

8
app/(tabs)/activity.tsx

@ -0,0 +1,8 @@
import { ThemedView } from "@/components/themed-view";
export default function ActivityScreen() {
return (
<ThemedView>11</ThemedView>
)
}

112
app/(tabs)/explore.tsx

@ -1,112 +0,0 @@
import { Image } from 'expo-image';
import { Platform, StyleSheet } from 'react-native';
import { Collapsible } from '@/components/ui/collapsible';
import { ExternalLink } from '@/components/external-link';
import ParallaxScrollView from '@/components/parallax-scroll-view';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Fonts } from '@/constants/theme';
export default function TabTwoScreen() {
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
headerImage={
<IconSymbol
size={310}
color="#808080"
name="chevron.left.forwardslash.chevron.right"
style={styles.headerImage}
/>
}>
<ThemedView style={styles.titleContainer}>
<ThemedText
type="title"
style={{
fontFamily: Fonts.rounded,
}}>
Explore
</ThemedText>
</ThemedView>
<ThemedText>This app includes example code to help you get started.</ThemedText>
<Collapsible title="File-based routing">
<ThemedText>
This app has two screens:{' '}
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
</ThemedText>
<ThemedText>
The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
sets up the tab navigator.
</ThemedText>
<ExternalLink href="https://docs.expo.dev/router/introduction">
<ThemedText type="link">Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Android, iOS, and web support">
<ThemedText>
You can open this project on Android, iOS, and the web. To open the web version, press{' '}
<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
</ThemedText>
</Collapsible>
<Collapsible title="Images">
<ThemedText>
For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
different screen densities
</ThemedText>
<Image
source={require('@/assets/images/react-logo.png')}
style={{ width: 100, height: 100, alignSelf: 'center' }}
/>
<ExternalLink href="https://reactnative.dev/docs/images">
<ThemedText type="link">Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Light and dark mode components">
<ThemedText>
This template has light and dark mode support. The{' '}
<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
what the user&apos;s current color scheme is, and so you can adjust UI colors accordingly.
</ThemedText>
<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
<ThemedText type="link">Learn more</ThemedText>
</ExternalLink>
</Collapsible>
<Collapsible title="Animations">
<ThemedText>
This template includes an example of an animated component. The{' '}
<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
the powerful{' '}
<ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
react-native-reanimated
</ThemedText>{' '}
library to create a waving hand animation.
</ThemedText>
{Platform.select({
ios: (
<ThemedText>
The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
component provides a parallax effect for the header image.
</ThemedText>
),
})}
</Collapsible>
</ParallaxScrollView>
);
}
const styles = StyleSheet.create({
headerImage: {
color: '#808080',
bottom: -90,
left: -35,
position: 'absolute',
},
titleContainer: {
flexDirection: 'row',
gap: 8,
},
});

28
app/(tabs)/mine.tsx

@ -0,0 +1,28 @@
import { ThemedView } from "@/components/themed-view";
import { Text, TouchableOpacity } from "react-native";
import { useRouter } from "expo-router";
export default function MainScreen() {
const router = useRouter();
const handleWithdraw = () => {
router.push("/withdraw");
};
return (
<ThemedView style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<TouchableOpacity
onPress={handleWithdraw}
style={{
backgroundColor: "#007AFF",
paddingVertical: 10,
paddingHorizontal: 20,
borderRadius: 8,
}}
>
<Text style={{ color: "#fff", fontSize: 16 }}></Text>
</TouchableOpacity>
</ThemedView>
)
}

8
app/(tabs)/recharge.tsx

@ -0,0 +1,8 @@
import { ThemedView } from "@/components/themed-view";
export default function RechargeScreen() {
return (
<ThemedView></ThemedView>
)
}

10
app/withdraw/index.tsx

@ -0,0 +1,10 @@
import { ThemedView } from "@/components/themed-view";
import { Text } from "react-native";
export default function WithdrawScreen() {
return (
<ThemedView style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text style={{ fontSize: 18 }}></Text>
</ThemedView>
);
}
Loading…
Cancel
Save