我目前正在开发一个与本机做反应的应用程序,我尝试使用 react-navigation 处理this教程,但是我遇到了麻烦。运行我的项目,我做了很多研究,我只是无法达到解决方案,首先是我使用 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
},
},
});
正如您所看到的,这是一个非常基本的应用程序,我只是无法工作,这是我在模拟器上的错误的屏幕截图:
如果你们能帮助我,我真的很感激。 感谢。
答案 0 :(得分:1)
您应该更改代码onPress = {()=&gt;导航(&#39;地图&#39;)}到onPress = {()=&gt;导航(&#39; ScreenMap&#39;)}和&#34; ScreenHome&#34;应该是第一个屏幕&#34; ScreenMap&#34;因为你想从&#34; App&#34;到#34; MapMarker&#34;。或者你可以设置initialRouteName:&#34; ScreenHome&#34;在stacknavigator中。
答案 1 :(得分:0)
您创建了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组件将在其道具中导航。注意,你没有“通过”导航道具。这是为你处理的。