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

对于不需要传统tab切换的app项目 实现简单登录 跳转 效果图如下

在登录的时候 应用的是 createSwitchNavigator 这个api可以屏蔽调android 的返回键 

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;

这里我提取出了一个路由文件， createStackNavigator 是传统的路由文件配置 headerMode none是为了标题去掉

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'
    }
});

这个利用FlatList 来渲染列表 

代码 https://pan.baidu.com/s/1FfEEJKrPGBMX95ipnUpqBw