Ошибка ссылки: не удается найти переменную: навигация в React Native

#react-native #navigation

#react-native #навигация

Вопрос:

Это ошибка, которую я получаю, когда нажимаю на кнопку «Подробности». Мне нужно переключаться с одного экрана на другой при нажатии кнопки.

Фрагмент кода выглядит следующим образом:

 import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
class HomeScreen extends React.Component {  
  render() {  
    return (  
        <View style={styles.container}>  
          <Text>Home Screen</Text>  
        </View>  
    );  
  }  
} 

class CartScreen extends React.Component {  
render() {  
    return (  
        <View style={styles.container}>    
            <Button mode="contained" onPress={() => navigation.navigate('Details')}>
            Details
            </Button>
        </View>  
    );  
}  
    function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      
    </View>
  );
}
} 
 

Было бы здорово, если бы кто-нибудь мог разобраться в этом!
TIA.

Ответ №1:

Вы должны изменить свой компонент класса на функциональный компонент для обеспечения согласованности.

 function HomeScreen({ navigation }) {
  return (
     <View style={styles.container}>    
            <Button mode="contained" onPress={() => navigation.navigate('Details')}>
            Details
            </Button>
        </View>  
  );
}