react-navigation学习笔记三：creatSwitc

搭建demo使用相关版本：
"react-native": "0.56.0",
"react-navigation": "^2.18.2"

介绍

一次只显示一个屏幕。默认情况下，不处理后退操作，并在您切换时将路由重置为其默认状态。不存在堆栈的概念，只会存在一个，如果想转到另外一个屏幕，会将当前屏幕杀死然后重置默认设置为想要显示的屏幕

简单使用

//createSwitchNavigator
import React from 'react';
import {
    StyleSheet,
    StatusBar,
    View,
    Button,
} from 'react-native';
import {createSwitchNavigator} from 'react-navigation';


class Navigation1 extends React.Component {
    static navigationOptions = {
        title: 'navigationScreen1',
    };

    render() {
        return (
            <View style={styles.container}>
                <Button
                    title="前往navigationScreen2 其实放弃当前 重置默认为navigationScreen2"
                    onPress={()=>this.props.navigation.navigate('navScr2')}
                />
                <StatusBar barStyle="light-content"/>
            </View>
        );
    }
}

class Navigation2 extends React.Component {
    static navigationOptions = {
        title: 'navigationScreen2',
    };

    render() {
        return (
            <View style={styles.container}>
                <Button
                    title="返回navigationScreen1 其实放弃当前 重置默认为navigationScreen1"
                    onPress={()=>this.props.navigation.navigate('navScr1')}
                />
                <StatusBar barStyle="light-content"/>
            </View>
        );
    }
}

//配置 入口
export default createSwitchNavigator(
    {
        navScr1: Navigation1,
        navScr2: Navigation2,
    },
    {
        initialRouteName: 'navScr1',
    }
);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
});

相关属性设置 生命周期等

参考creatStackNavigation相关配置
官网API介绍