Compare commits

..

2 Commits

Author SHA1 Message Date
7268a93b02 navigation works! 2025-05-15 10:43:25 +07:00
e6c5783d62 add import alias 2025-05-15 10:42:40 +07:00
4 changed files with 77 additions and 16 deletions

41
App.tsx
View File

@ -1,20 +1,31 @@
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "@/screens/Home";
import ProfileScreen from "@/screens/Profile";
export default function App() {
export type RootStackParamList = {
Home: undefined;
Profile: undefined;
};
const Stack = createNativeStackNavigator<RootStackParamList>();
function App() {
return (
<View style={styles.container}>
<Text>Open up App.tsx to start working on your app!</Text>
<StatusBar style="auto" />
</View>
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerLargeTitle: true }}>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
declare global {
namespace ReactNavigation {
interface RootParamList extends RootStackParamList {}
}
}
export default App;

26
src/screens/Home.tsx Normal file
View File

@ -0,0 +1,26 @@
import { useNavigation } from "@react-navigation/native";
import { type RootStackParamList } from "App";
import { StatusBar } from "expo-status-bar";
import { Button, StyleSheet, Text, View } from "react-native";
export default function HomeScreen() {
const navigation = useNavigation();
return (
<View style={styles.container}>
<Text>Open up App.tsx to start working on your app!</Text>
<Button title="profile" onPress={() => navigation.navigate("Profile")} />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});

20
src/screens/Profile.tsx Normal file
View File

@ -0,0 +1,20 @@
import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
export default function ProfileScreen() {
return (
<View style={styles.container}>
<Text>This is a profile screen</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});

View File

@ -1,6 +1,10 @@
{
"extends": "expo/tsconfig.base",
"compilerOptions": {
"strict": true
"strict": true,
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}