界面跳转

前端之家收集整理的这篇文章主要介绍了界面跳转前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
/**
 * 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

猜你在找的React相关文章