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