React Native页面跳转示例-优快云博客

本文介绍了一个React Native应用中实现页面跳转的具体方法。使用React Navigation库创建了三个页面之间的导航，并提供了完整的代码示例，包括主页、主屏幕及个人资料页的组件定义与跳转逻辑。

2019独角兽企业重金招聘Python工程师标准>>>

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    AppRegistry, Button,
    StyleSheet,
    Text,
    View
} from 'react-native';
import { StackNavigator } from 'react-navigation';
import MainScreen from './src/MainScreen';
import ProfileScreen from './src/ProfileScreen'
export default class Tmic extends Component {
    static navigationOptions ={
        title:'Tmic',
    };
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.container}>

              <Button title='Tmic'
                      onPress={()=>{
                          navigate('Main')
                      }}></Button>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
});
const SimpleApp = StackNavigator({
    Home:{screen:Tmic},
    Main:{screen:MainScreen},
    Pro:{screen:ProfileScreen},
})

AppRegistry.registerComponent('Tmic', () => SimpleApp);

import React, { Component } from 'react';
import {Button} from "react-native";

export default class MainScreen extends Component{
    render(){
        const { navigate } = this.props.navigation;
        return(

            <Button title='MainScreen'

                    onPress={()=>{
                        navigate('Pro');
                    }}
            ></Button>
        );
    }
}

import React, { Component } from 'react';
import {Text} from "react-native";
export default class ProfileScreen extends Component{

    render(){
        return(

            <Text>6666666666</Text>

        );
    }

}

实现三个页面的跳转

记得在项目根目录下添加：