
Файл app.jsx — только навигация
// Screens
import MainNavigation from "./src/routes/MainNavigation";
export default function App() {
return (
);
}
Навигация как в документации
MainNavigation.tsx
// Navigation
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
// Screens
import HomeScreen from "../screens/HomeScreen/HomeScreen";
import TodoDetailsScreen from "../screens/TodoDetailsScreen/TodoDetailsScreen";
import { Button } from "react-native";
// Keep the splash screen visible while we fetch resources
const Stack = createNativeStackNavigator();
const MainNavigation = () => {
return (
);
};
export default MainNavigation;
HomeScreen.tsx — простой экран с одним перенаправлением
import { Button, SafeAreaView, Text, View } from "react-native";
import { NavigationProp, RouteProp } from "@react-navigation/native";
const HomeScreen = ({
navigation,
}: {
navigation: NavigationProp;
}) => {
return (
Home screen
{
navigation.navigate("Details", { _id: "123" });
}}
title="go to details TODO"
/>
);
};
export default HomeScreen;
TodoDetailsScreen.tsx — простой экран
import { NavigationProp, RouteProp } from "@react-navigation/native";
import { Button, Text, View } from "react-native";
const TodoDetailsScreen = ({
navigation,
route,
}: {
route: RouteProp;
navigation: NavigationProp;
}) => {
const { _id } = route.params;
console.log("_id", _id);
return (
TodoDetailsScreen
{
navigation.navigate("Home");
}}
title="go home"
/>
);
};
package.json
{
"name": "reactnative-ts",
"version": "1.0.0",
"main": "expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"expo": "~51.0.2",
"expo-font": "^12.0.4",
"expo-splash-screen": "^0.27.4",
"expo-status-bar": "~1.12.1",
"react": "18.2.0",
"react-native": "0.74.1",
"react-native-safe-area-context": "^4.10.1",
"react-native-screens": "^3.31.1"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/react": "~18.2.45",
"typescript": "^5.1.3"
},
"private": true
}
Подробнее здесь: https://stackoverflow.com/questions/784 ... xpo-go-ios
Мобильная версия