React Navigation

https://reactnavigation.org

Установка

yarn add @react-navigation/native

Installing dependencies into an Expo managed project

npx expo install react-native-screens react-native-safe-area-context

./App.js

import { StatusBar } from "expo-status-bar";
import { Text, View } from "react-native";

// React Navigation
import { NavigationContainer } from "@react-navigation/native";

export default function App() {
  return (
    <NavigationContainer>
      <View className="flex-1 items-center justify-center bg-white">
        <Text className="font-bold text-red-500">
          Open up App.js to start working on your app!
        </Text>
        <StatusBar style="auto" />
      </View>
    </NavigationContainer>
  );
}

Installing the native stack navigator library

yarn add @react-navigation/native-stack

./App.js

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import HomeScreen from "./screens/HomeScreen";

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Создаем папку ‘screens’ и в ней файл ‘HomeScreen.js’

./screens/HomeScreen.js

import { useNavigation } from "@react-navigation/native";
import { useLayoutEffect } from "react";
import { Text, View } from "react-native";

export default function HomeScreen() {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false, // headerTitle: "TESTING",
    });
  }, []);

  return (
    <View className="p-4">
      <Text className="font-bold text-blue-600">HomeScreen</Text>
    </View>
  );
}

Safe AriaView

./screens/HomeScreen.js

import { useNavigation } from "@react-navigation/native";
import { useLayoutEffect } from "react";
import { Text, SafeAreaView } from "react-native";

export default function HomeScreen() {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false, // headerTitle: "TESTING",
    });
  }, []);

  return (
    <SafeAreaView className="p-4">
      <Text className="font-bold text-blue-600">HomeScreen</Text>
    </SafeAreaView>
  );
}