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

• Z时代
• 2024-01-10
• 分类：综合

目录结构：

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简单的跳转 的全部内容， 来源链接： utcz.com/z/383716.html