130 lines
4.2 KiB
TypeScript
130 lines
4.2 KiB
TypeScript
import { StyleSheet, Image, Platform } from "react-native";
|
|
|
|
import { Collapsible } from "@/components/Collapsible";
|
|
import { ExternalLink } from "@/components/ExternalLink";
|
|
import ParallaxScrollView from "@/components/ParallaxScrollView";
|
|
import { ThemedText } from "@/components/ThemedText";
|
|
import { ThemedView } from "@/components/ThemedView";
|
|
import { IconSymbol } from "@/components/ui/IconSymbol";
|
|
|
|
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">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={{ 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>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
headerImage: {
|
|
color: "#808080",
|
|
bottom: -90,
|
|
left: -35,
|
|
position: "absolute",
|
|
},
|
|
titleContainer: {
|
|
flexDirection: "row",
|
|
gap: 8,
|
|
},
|
|
});
|