无法读取未定义的属性“navigate”-React Native Navigation
2017-09-21
2302
我目前正在开发一个与 React Native 配合使用的应用程序,我尝试使用 react-navigation 按照 本 教程制作流程,但是在运行项目时遇到了麻烦,我做了很多研究,但就是找不到解决方案,首先我使用的是 react-native-cli: 2.0.1 和 react-native: 0.48.3 ,这是我的代码:
App.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
},
},
});
如您所见,这是一个非常基本的应用程序,我就是无法让它工作,这是我在模拟器上出现的错误的屏幕截图:
如果你们能帮助我,我将非常非常感激。 谢谢。
2个回答
您应该将代码
onPress={() => navigation('Map')
更改为
onPress={() => navigation('ScreenMap')
,并且
ScreenHome
应为第一个屏幕,然后是
ScreenMap
,因为您想从
App
导航到
MapMarker
。或者您可以在 stacknavigator 中设置
initialRouteName: ScreenHome
。
Md Isfar Uddin
2017-09-22
您创建了 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 中进行导航。请注意,您不会“传递”导航 prop。这是为您处理的。
pwcremin
2017-09-23