[英]Cannot read property 'navigate' of undefined - React Native Navigation
I am currently working on a app which works with react native and I tried to make a flow using react-navigation working on this tutorial but I am having trouble at the point of running my project, I've done a lot of research and i just cant get to the solution, first for all I am using react-native-cli: 2.0.1 and react-native: 0.48.3 , this is my code:我目前正在开发一个与 react native 一起使用的应用程序,我尝试使用本教程中的react-navigation制作流程,但在运行我的项目时遇到了问题,我做了很多研究,我只是无法找到解决方案,首先我使用的是react-native-cli: 2.0.1 和 react-native: 0.48.3 ,这是我的代码:
App.js:应用程序.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;
my Router.js我的 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
},
},
});
As you can see this is a pretty basic App which i just cant make work, this is a screenshot of my error on the simulator:正如你所看到的,这是一个非常基本的应用程序,我无法正常工作,这是我在模拟器上的错误截图:
I would really really appreciate if you guys could help me with this.如果你们能帮我解决这个问题,我真的很感激。 Thanks.谢谢。
You should change the code onPress={() => navigate('Map')}
to onPress={() => navigate('ScreenMap')}
and ScreenHome
should be the first screen then ScreenMap
as you want to navigate from App
to MapMarker
.您应该将代码onPress={() => navigate('Map')}
更改为onPress={() => navigate('ScreenMap')}
并且ScreenHome
应该是第一个屏幕,然后是ScreenMap
因为您要从App
导航到MapMarker
。 Or you can set initialRouteName: ScreenHome
in the stacknavigator.或者您可以在initialRouteName: ScreenHome
中设置initialRouteName: ScreenHome
ScreenHome。
You create your StackNavigator, but where do you use it?您创建了您的 StackNavigator,但您在哪里使用它? You should have something like你应该有类似的东西
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);
Now that your StackNavigator is controlling what is shown, your App component will have navigation in its props.现在您的 StackNavigator 正在控制显示的内容,您的 App 组件将在其 props 中有导航。 Note, you do not "pass" the navigation prop.请注意,您不会“传递”导航道具。 This is handled for you.这是为您处理的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.