При работе с React Native и навигационными библиотеками, такими как React Navigation, вы часто сталкиваетесь с параметром NativeStackNavigationProp. Этот параметр представляет собой мощный инструмент, позволяющий перемещаться между экранами, передавать данные и управлять стеком навигации в вашем приложении. В этой статье мы рассмотрим различные методы и примеры кода для эффективного использования параметров NativeStackNavigationProp.

1. navigate():
   Метод Navigation() позволяет перейти к указанному экрану в стеке навигации. Он принимает два параметра: имя целевого экрана и необязательный объект, содержащий любые параметры, которые вы хотите передать на целевой экран.

import { NativeStackNavigationProp } from '@react-navigation/native-stack';
type RootStackParamList = {
  Home: { userId: number };
  Profile: { userId: number };
};
type HomeScreenProps = {
  navigation: NativeStackNavigationProp<RootStackParamList, 'Home'>;
};
const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
  const handleNavigate = () => {
    navigation.navigate('Profile', { userId: 123 });
  };
  return (
    <View>
      <Button title="Go to Profile" onPress={handleNavigate} />
    </View>
  );
};

1. goBack():
   Метод goBack() позволяет вернуться к предыдущему экрану в стеке навигации. Он не принимает никаких параметров.

import { NativeStackNavigationProp } from '@react-navigation/native-stack';
type ProfileScreenProps = {
  navigation: NativeStackNavigationProp<RootStackParamList, 'Profile'>;
};
const ProfileScreen: React.FC<ProfileScreenProps> = ({ navigation }) => {
  const handleGoBack = () => {
    navigation.goBack();
  };
  return (
    <View>
      <Button title="Go Back" onPress={handleGoBack} />
    </View>
  );
};

1. setParams():
   Метод setParams() позволяет обновлять параметры текущего экрана. Он принимает объект, содержащий новые параметры, в качестве единственного параметра.

import { NativeStackNavigationProp } from '@react-navigation/native-stack';
type ProfileScreenProps = {
  navigation: NativeStackNavigationProp<RootStackParamList, 'Profile'>;
};
const ProfileScreen: React.FC<ProfileScreenProps> = ({ navigation }) => {
  const handleUpdateParams = () => {
    navigation.setParams({ userId: 456 });
  };
  return (
    <View>
      <Button title="Update Params" onPress={handleUpdateParams} />
    </View>
  );
};

В этой статье мы рассмотрели некоторые наиболее часто используемые методы с параметрами NativeStackNavigationProp в React Native. Мы рассмотрели метод Navigation() для навигации по экрану, метод goBack() для возврата назад и метод setParams() для обновления параметров экрана. Эффективно используя эти методы, вы можете создать удобную навигацию в своих приложениях React Native.

Не забудьте импортировать необходимые модули и определить соответствующие типы для вашего стека навигации. Поэкспериментируйте с этими методами и адаптируйте их к своим конкретным случаям использования, чтобы создать мощные и динамичные процессы навигации.

Понимая и используя параметры NativeStackNavigationProp, вы можете улучшить взаимодействие с пользователем в своих приложениях React Native и создавать более интерактивные и привлекательные мобильные приложения.