106 lines
4.4 KiB
TypeScript
106 lines
4.4 KiB
TypeScript
import { StyleSheet, Image, Platform } from 'react-native';
|
|
import { Collapsible } from '@/components/default/Collapsible';
|
|
import { ExternalLink } from '@/components/default/ExternalLink';
|
|
import ParallaxScrollView from '@/components/default/ParallaxScrollView';
|
|
import { ThemedText, ThemedView } from '@/components/theme/Theme';
|
|
import { IconSymbol } from '@/components/ui/IconSymbol';
|
|
|
|
const TabTwoScreen = () => {
|
|
return (
|
|
<ParallaxScrollView
|
|
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
|
|
headerHeight={150}
|
|
headerImage={
|
|
<IconSymbol size={200} color='#808080' name='gear.circle' style={styles.headerImage} />
|
|
}
|
|
>
|
|
<ThemedView style={styles.titleContainer}>
|
|
<ThemedText type='title'>Settings</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={{ alignSelf: 'center' }} />
|
|
<ExternalLink href='https://reactnative.dev/docs/images'>
|
|
<ThemedText type='link'>Learn more</ThemedText>
|
|
</ExternalLink>
|
|
</Collapsible>
|
|
<Collapsible title='Custom fonts'>
|
|
<ThemedText>
|
|
Open <ThemedText type='defaultSemiBold'>app/_layout.tsx</ThemedText> to see how to load{' '}
|
|
<ThemedText style={{ fontFamily: 'SpaceMono' }}>
|
|
custom fonts such as this one.
|
|
</ThemedText>
|
|
</ThemedText>
|
|
<ExternalLink href='https://docs.expo.dev/versions/latest/sdk/font'>
|
|
<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'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'>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>
|
|
);
|
|
};
|
|
export default TabTwoScreen;
|
|
|
|
const styles = StyleSheet.create({
|
|
headerImage: {
|
|
color: '#808080',
|
|
bottom: -90,
|
|
left: -35,
|
|
position: 'absolute',
|
|
},
|
|
titleContainer: {
|
|
flexDirection: 'row',
|
|
gap: 8,
|
|
},
|
|
});
|