目录结构:
1:定义路由页AppNavigators
import {StackNavigator} from 'react-navigation';
import HomePage from '../pages/HomePage';
import Page1 from '../pages/Page1';
import Page2 from '../pages/Page2';
export const AppStackNavigator=StackNavigator({
HomePage:{screen:HomePage},
Page1:{screen:Page1},
Page2:{screen:Page2},
});
2: 定义主页(HomePage)
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Button,
} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
static navigationOptions = {
title: 'HomePage',
};
render() {
const {navigation} =this.props;
return (
<View style={styles.container}>
<Text>HomePage</Text>
<Button
title="go to page1"
onPress={()=>navigation.navigate('Page1')}
/>
<Button
title="go to page2"
onPress={()=>navigation.navigate('Page2')}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#d8fffa',
}
});
3: 定义page1
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button,
} from 'react-native';
type Props = {};
export default class Page1 extends Component<Props> {
static navigationOptions = {
title: 'Page1',
};
render() {
const {navigation}=this.props;
return (
<View style={styles.container}>
<Text>欢迎来到page1</Text>
<Button
title="go back"
onPress={()=>navigation.goBack()}//返回页面
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffaa',
}
});
4:定义page2
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Button,
} from 'react-native';
type Props = {};
export default class Page2 extends Component<Props> {
static navigationOptions = {
title: 'Page2',
};
render() {
const {navigation}=this.props;
return (
<View style={styles.container}>
<Text>欢迎来到page2</Text>
<Button
title="go back"
onPress={()=>navigation.goBack()}//返回页面
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#ffffaa',
}
});
4:App.js导出整个路由
import {AppStackNavigator} from "./navigations/AppNavigators";
export default AppStackNavigator;
5:index.js页
整个项目的入口,渲染APP.js
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('RN3', () => App);
效果:
![React-Native之(小白计划一)StackNavigator简单的跳转 React-Native之(小白计划一)StackNavigator简单的跳转](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzEzNC8zMDkwNTY5OGQxYWZlMmNiNDEyZGQ1YTA2NDI5NGQ0Ni5wbmc=)
![React-Native之(小白计划一)StackNavigator简单的跳转 React-Native之(小白计划一)StackNavigator简单的跳转](/default/index/img?u=aHR0cHM6Ly9waWFuc2hlbi5jb20vaW1hZ2VzLzE3NC80NTUwZjU3YzZiY2UxOTA1MmQ4N2FhNWZhZGQzNGYxZS5wbmc=)