react-navigation 实现简单登录 跳转路由

import { createSwitchNavigator,createStackNavigator } from ‘react-navigation‘;

//引入路由页面
import Login from "./page/login/login.js";
import  Home  from ‘./page/agvAuto/home.js‘;
import  AgvAuto  from ‘./page/agvAuto/agvAuto.js‘;
import  AgvManual  from ‘./page/agvAuto/agvManual.js‘;
import  AgvGangControl  from ‘./page/agvAuto/agvGangControl.js‘;
import  AgvCodeReader  from ‘./page/agvAuto/agvCodeReader.js‘;
import  AgvParameterSet  from ‘./page/agvAuto/agvParameterSet.js‘;


//加载路由配置
const AppStack = createStackNavigator(
    { 
        Home: {screen : Home},AgvAuto: {screen : AgvAuto},AgvManual:{screen : AgvManual},AgvGangControl:{screen : AgvGangControl},AgvCodeReader:{screen : AgvCodeReader},AgvParameterSet:{screen : AgvParameterSet}
    },{
        mode: ‘modal‘,headerMode: ‘none‘,}
);

//身份验证流程rooter
const Rooter = createSwitchNavigator(
    {
      AuthLoading: Login,App: AppStack,},{
      initialRouteName: ‘AuthLoading‘,}
);

export default Rooter;

import React,{ Component } from ‘react‘;
import {
  Platform,StyleSheet,Text,View,Image,FlatList
} from ‘react-native‘;
import LogoTitle from ‘../../common/logoTitle.js‘;
import NavListItem from ‘../../component/navItem.js‘;

class NavList extends React.PureComponent {
  
    _keyExtractor = (item,index) => item.id;
  
    _onPressItem = (id: string) => {
        const { navigate } = this.props.navigation;
        // updater functions are preferred for transactional updates
        console.log(id)
        navigate(id);
    };
  
    _renderItem = ({item}) => (
        <NavListItem
            id={item.id}
            onPressItem={this._onPressItem}
            title={item.title}
        />
    );
  
    render() {
        return (
            <FlatList
                data={this.props.data}
                renderItem={this._renderItem}
                horizontal={true}
            />
        );
    }
}

export default class Home extends Component<{}> {
    constructor(props){
        super(props);
        this.state = {
            data : [
                {
                    id : ‘AgvAuto‘,title : ‘自动控制‘
                },{
                    id : ‘AgvGangControl‘,title : ‘联动控制‘
                },{
                    id : ‘AgvManual‘,title : ‘手动控制‘
                },{
                    id : ‘AgvCodeReader‘,title : ‘读码器‘
                },{
                    id : ‘AgvParameterSet‘,title : ‘参数设定‘
                },]
        };
    }

    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.container}>
                <LogoTitle logout={
                    ()=>{
                        //退出登录到login
                        navigate(‘AuthLoading‘);
                    }    
                }
                
                goBack={
                    ()=>{
                        //退出登录到login
                        this.props.navigation.goBack();
                    }    
                }
                />
                <View style={styles.container}>
                    <View style={styles.nav}>
                        <NavList 
                            navigation={this.props.navigation}
                            data={this.state.data}
                        />
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,backgroundColor: ‘#fff‘,nav:{
        height: 210,alignItems: ‘center‘,container: {
        flex : 1,justifyContent : ‘center‘
    }
});