界面跳转

/**
 * 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>

        );
    }

}

实现三个页面的跳转

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

1,

npm install --save react-navigation

2，

yarn add react-navigation