Блог

Я пытаюсь создать две кнопки, которые переходят на две другие страницы в моем приложении react. Я нажимаю на любую кнопку и получаю следующую ошибку, когда нажимаю на кнопку с пометкой «Домой».

 TypeError: Cannot read properties of undefined (reading 'props') onPress   9 | lt;Button  10 | title="Go to Home"  11 | onPress={ gt; 12 | () =gt; this.props.navigation.navigate('Home')  13 | ^ }  14 | /gt;amp;nbsp;  15 |   

Я получаю следующую ошибку, когда нажимаю на кнопку с пометкой профиль.

 TypeError: Cannot read properties of undefined (reading 'props') onPress  16 | lt;Button  17 | title="Go to Profile"  18 | onPress={ gt; 19 | () =gt; this.props.navigation.navigate('Profile')  20 |   21 | ^ }  22 | /gt;  

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

Apps.js

 import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import Home from './Screens/Home'  export default function App() {  return (  lt;View style={styles.container}gt;  lt;Textgt;Open up App.js to start working on your app!lt;/Textgt;amp;nbsp;  lt;Button  title="Go to Home"  onPress={  () =gt; this.props.navigation.navigate('Home')  }  /gt;amp;nbsp;   lt;Button  title="Go to Profile"  onPress={  () =gt; this.props.navigation.navigate('Profile')  }  /gt;  lt;/Viewgt;  ); } const styles = StyleSheet.create({  container: {  flex: 1,  backgroundColor: '#fff',  alignItems: 'center',  justifyContent: 'center',  }, });  

Home.js

 import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native';  //import { createStackNavigator } from 'react-navigator';  export default class Home extends React.Component {  render() {  const userName = this.props.navigation.getParam('')   return (  lt;View style={styles.container}gt;  lt;Textgt;Hello from Profile Pagelt;/Textgt;  lt;/Viewgt;  );  } } const styles = StyleSheet.create({  container: {  flex: 1,  backgroundColor: '#fff',  alignItems: 'center',  justifyContent: 'center',  }, });  

Profile.js

 import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native';  import { createStackNavigator } from 'react-navigator';  export default class Profile extends React.Component {  render() {  return (  lt;View style={styles.container}gt;  lt;Textgt;Hello from Profile Pagelt;/Textgt;  lt;/Viewgt;  );  } } const styles = StyleSheet.create({  container: {  flex: 1,  backgroundColor: '#fff',  alignItems: 'center',  justifyContent: 'center',  }, });  

Ваш Apps.js является функциональным компонентом, и ключевое this слово не будет работать , плюс ничего не передается через export default function App() , что вы, возможно, захотите сделать this.props.navigation.navigate('Home') , это заменить props.navigation.navigate('Home') и получить параметр props, выполнив export default function App(props)