界面跳转

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!