В настоящее время я изучаю React Native, и у меня возникли проблемы с React-навигацией. Я пытаюсь переключить экран при нажатии "кнопки". В «кнопке» у меня есть:
onPress = {() =>
navigate('Home')}
У меня const { navigate } = this.props.navigation; перед оператором возврата.
Когда я запускаю его, я получаю сообщение «Невозможно прочитать свойство« перейти »для неопределенного значения.
Думаю, мне нужно где-то разместить this.props.navigation.
Вот два моих файла: «IntroPageFive» - это тот, у которого есть кнопка и «реакция-навигация».
Я хочу перейти в «IntroPageOne» при нажатии кнопки.
Код для IntroPageFive:
import React from 'react';
import { Text, View, Image, Linking, Button, TouchableOpacity } from 'react-native';
import PlaceholderImage from '../images/placeholder_thumbnail.png';
import SignInFooter from './signInFooter';
import { createStackNavigator } from 'react-navigation';
import IntroPageOne from './introPageOne';
const App = createStackNavigator({
Home: { screen: IntroPageOne },
});
class IntroPageFive extends React.Component {
render() {
const {
headerTextStyle,
thumbnailStyle,
viewStyle,
subTextStyle,
mainTextSection,
footerSectionStyle,
startButtonStyle,
startButtonTextStyle,
signInButtonStyle ,
signInButtonTextStyle
} = styles;
const { navigate } = this.props.navigation;
return (
<View style = {viewStyle}>
<Image style = {thumbnailStyle} source = {require('../images/placeholder_thumbnail.png')} />
<View style = {mainTextSection}>
<Text style = {headerTextStyle}>Take A Ride For</Text>
<Text style = {headerTextStyle}>Your Favorite Car!</Text>
</View>
<View>
<TouchableOpacity
onPress = {() =>
navigate('Home')
}
style = {startButtonStyle}
>
<Text style = {startButtonTextStyle}>LET'S GET STARTED</Text>
</TouchableOpacity>
</View>
<View style = {footerSectionStyle}>
<SignInFooter />
</View>
</View>
);
}
}
export default IntroPageFive;Вот код для IntroPageOne:
import React from 'react';
import { Text, View, Image, Linking } from 'react-native';
import PlaceholderImage from '../images/placeholder_thumbnail.png';
import SignInFooter from './signInFooter';
const IntroPageOne = () => {
const { headerTextStyle, thumbnailStyle, viewStyle, subTextStyle } = styles;
return (
<View style = {viewStyle} >
<Image style = {thumbnailStyle} source = {require('../images/placeholder_thumbnail.png')} />
<Text style = {headerTextStyle}>Forget Everything You</Text>
<Text style = {headerTextStyle}>Know About Making</Text>
<Text style = {headerTextStyle}>Deals For Your Car</Text>
<Text style = {subTextStyle}>Deal negotiation powered by AI</Text>
<SignInFooter />
</View>
);
};
};
export default IntroPageOne;Может ли кто-нибудь сказать мне, как исправить эту проблему?
Спасибо.
Кроме того, если вы хотите перейти к «IntroPageOne» при нажатии кнопки, вы должны указать это имя для navigate (), а не «Домой».
Кажется, вы не вставляете IntroPageFive в createStackNavigator, поэтому вы не получите опору navigation для своего компонента.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Да, вы должны где-нибудь передать «навигацию» в «IntroPageFive».