You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
98 lines
3.1 KiB
98 lines
3.1 KiB
import { Image } from 'expo-image'; |
|
import { Platform, StyleSheet } from 'react-native'; |
|
|
|
import { HelloWave } from '@/components/hello-wave'; |
|
import ParallaxScrollView from '@/components/parallax-scroll-view'; |
|
import { ThemedText } from '@/components/themed-text'; |
|
import { ThemedView } from '@/components/themed-view'; |
|
import { Link } from 'expo-router'; |
|
|
|
export default function HomeScreen() { |
|
return ( |
|
<ParallaxScrollView |
|
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }} |
|
headerImage={ |
|
<Image |
|
source={require('@/assets/images/partial-react-logo.png')} |
|
style={styles.reactLogo} |
|
/> |
|
}> |
|
<ThemedView style={styles.titleContainer}> |
|
<ThemedText type="title">Welcome!</ThemedText> |
|
<HelloWave /> |
|
</ThemedView> |
|
<ThemedView style={styles.stepContainer}> |
|
<ThemedText type="subtitle">Step 1: Try it</ThemedText> |
|
<ThemedText> |
|
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes. |
|
Press{' '} |
|
<ThemedText type="defaultSemiBold"> |
|
{Platform.select({ |
|
ios: 'cmd + d', |
|
android: 'cmd + m', |
|
web: 'F12', |
|
})} |
|
</ThemedText>{' '} |
|
to open developer tools. |
|
</ThemedText> |
|
</ThemedView> |
|
<ThemedView style={styles.stepContainer}> |
|
<Link href="/modal"> |
|
<Link.Trigger> |
|
<ThemedText type="subtitle">Step 2: Explore</ThemedText> |
|
</Link.Trigger> |
|
<Link.Preview /> |
|
<Link.Menu> |
|
<Link.MenuAction title="Action" icon="cube" onPress={() => alert('Action pressed')} /> |
|
<Link.MenuAction |
|
title="Share" |
|
icon="square.and.arrow.up" |
|
onPress={() => alert('Share pressed')} |
|
/> |
|
<Link.Menu title="More" icon="ellipsis"> |
|
<Link.MenuAction |
|
title="Delete" |
|
icon="trash" |
|
destructive |
|
onPress={() => alert('Delete pressed')} |
|
/> |
|
</Link.Menu> |
|
</Link.Menu> |
|
</Link> |
|
|
|
<ThemedText> |
|
{`Tap the Explore tab to learn more about what's included in this starter app.`} |
|
</ThemedText> |
|
</ThemedView> |
|
<ThemedView style={styles.stepContainer}> |
|
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText> |
|
<ThemedText> |
|
{`When you're ready, run `} |
|
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '} |
|
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '} |
|
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '} |
|
<ThemedText type="defaultSemiBold">app-example</ThemedText>. |
|
</ThemedText> |
|
</ThemedView> |
|
</ParallaxScrollView> |
|
); |
|
} |
|
|
|
const styles = StyleSheet.create({ |
|
titleContainer: { |
|
flexDirection: 'row', |
|
alignItems: 'center', |
|
gap: 8, |
|
}, |
|
stepContainer: { |
|
gap: 8, |
|
marginBottom: 8, |
|
}, |
|
reactLogo: { |
|
height: 178, |
|
width: 290, |
|
bottom: 0, |
|
left: 0, |
|
position: 'absolute', |
|
}, |
|
});
|
|
|