[英]React Navigation - cannot read property 'navigate' of undefined
[英]Cannot read property 'navigate' of undefined - React Native Navigation
我目前正在开发一个与 react native 一起使用的应用程序,我尝试使用本教程中的react-navigation制作流程,但在运行我的项目时遇到了问题,我做了很多研究,我只是无法找到解决方案,首先我使用的是react-native-cli: 2.0.1 和 react-native: 0.48.3 ,这是我的代码:
应用程序.js:
import React, { Component } from 'react';
import { Text, Button, View } from 'react-native';
import {
StackNavigator,
} from 'react-navigation';
class App extends Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
console.log(this.props.navigation);
const { navigate } = this.props.navigation;
return (
<View>
<Text>Go to maps!</Text>
<Button
onPress={() => navigate('Map')}
title="MAP"
/>
</View>
);
}
}
export default App;
我的 Router.js
import {
StackNavigator,
} from 'react-navigation';
import MapMarker from './MapMarker';
import App from './App';
export const UserStack = StackNavigator({
ScreenMap:
{
screen: MapMarker,
navigationOptions:
{
title: "Map",
header:null
},
},
ScreenHome:
{
screen: App,
navigationOptions:
{
title: "Home",
headerLeft:null
},
},
});
正如你所看到的,这是一个非常基本的应用程序,我无法正常工作,这是我在模拟器上的错误截图:
如果你们能帮我解决这个问题,我真的很感激。 谢谢。
您应该将代码onPress={() => navigate('Map')}
更改为onPress={() => navigate('ScreenMap')}
并且ScreenHome
应该是第一个屏幕,然后是ScreenMap
因为您要从App
导航到MapMarker
。 或者您可以在initialRouteName: ScreenHome
中设置initialRouteName: ScreenHome
ScreenHome。
您创建了您的 StackNavigator,但您在哪里使用它? 你应该有类似的东西
import React, { Component } from 'react';
import {
AppRegistry,
View
} from 'react-native';
import {
StackNavigator,
} from 'react-navigation';
export default class MyApp extends Component {
render() {
return (
<View style={{flex:1}}>
<StackNavigator/>
</View>
);
}
}
AppRegistry.registerComponent('MyApp', () => MyApp);
现在您的 StackNavigator 正在控制显示的内容,您的 App 组件将在其 props 中有导航。 请注意,您不会“传递”导航道具。 这是为您处理的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.