Ошибка встроенной навигации React. Как мне это решить?

#react-native #react-navigation #react-navigation-stack

#react-native #реагировать-навигация #реагировать-навигация-стек

Вопрос:

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

 import 'react-native-gesture-handler';
import * as React from 'react';
import {View, Text, Button} from 'react-native';
import { NavigationContainer, StackActions } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const HomeScreen = () => {
  return(
    <View>
      <Text>Home Screen</Text>
      <Button title="Go to Profile Screen" onPress={()=> navigation.navigate("Profile")}/>
    </View>
  );

}
const ProfileScreen = () => {
  return(
    <View>
      <Text>Profile Screen</Text>
      <Button title="Go to Home Screen" onPress={() => navigation.navigate("Home")}/>
    </View>
  );

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

Заранее благодарю вас.

Ответ №1:

Вы можете получить navigation объект из props . Пример кода:

 const HomeScreen = ({navigation}) => {
  return(
    <View>
      <Text>Home Screen</Text>
      <Button title="Go to Profile Screen" onPress={()=> navigation.navigate("Profile")}/>
    </View>
  );
}