React-Native之（小白计划一）StackNavigator简单的跳转

桃扇骨 2022-05-23 04:26 159阅读 0赞

## 目录结构： ##

![70][]

## 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);

## 效果： ##

![70 1][]![70 2][]

[70]: /images/20220523/c0de1a6e1b6e4191a933efb55bebc00c.png
[70 1]: https://img-blog.csdn.net/20180602093056519?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lVX01fSw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220523/cc530b4cac4b4adab3284d671d7c6f55.png