如何优雅的使用React-Navigation3.x路由组件

使用必读文档

1.页面跳转方法：

reset - 切换路由相关
replace-切换路由相关
navigate-跳转到下一个路由，可以是路由中的任意一个。
push-作用和navigate基本差不多，唯一不同之处是当在同一个页面继续跳转时，navigate不会起作用，而push会重新路由到下一个。例如：当前在A页页面时，A.navigation.navigate('A')时，不会起作用。而使用push可用。
goBack-返回到上一个路由
pop-返回到上一个路由和goBack类似。
popToTop-返回到栈顶，并关闭所有的路由。

2.页面跳转时可携带参数

let params = {
  "key":"value"
};
navigate('RoutName',params)

3.创建navigator路由

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };

  /* render function, etc */
}

class DetailsScreen extends React.Component {
  static navigationOptions = {
    title: 'Details',
  };

  /* render function, etc */
}

/* other code... */

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home', //根页面
    /* The header config from HomeScreen is now here */
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

export default createAppContainer(RootStack);

注意:3.x版本之后需要返回一个包裹createAppContainer。

4.创建tabNavigator路由

import React from 'react';
import { Text, View,Image } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';

class HomeScreen extends React.Component {

static navigationOptions = {
        tabBarLabel:'Home',
        tabBarIcon : ({focused})=>{
            const image = focused?require('./Resource/message.png'):require('./Resource/message-outline.png');
            return (
                <Image source={image} style={{width:24,height:24}}/>
            )
        },
        tabBarOnPress: ({ navigation, defaultHandler }) => {
            defaultHandler();
            console.log(' press'+navigation)
        }
    };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {

static navigationOptions = {
        tabBarLabel:'Setting',
        tabBarIcon : ({focused})=>{
            const image = focused?require('./Resource/message.png'):require('./Resource/message-outline.png');
            return (
                <Image source={image} style={{width:24,height:24}}/>
            )
        },
        tabBarOnPress: ({ navigation, defaultHandler }) => {
            defaultHandler();
            console.log(' press'+navigation)
        }
    };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
},{
        // tabBarItem整体配置
        initialRouteName: 'Home',  //第一个展示页面
        swipeEnabled: false,      //是否支持手势切换
        animationEnabled: false, //支持动画
        lazy: true,  //懒加载
        tabBarOptions:{
            activeTintColor:'#1F8CEB',
            inactiveTintColor:'#4b4b4b',
        },
        backBehavior:'none'  //安卓物理返回键处理
    });

export default createAppContainer(TabNavigator);

5.navigator+tabNavigator

import {
    createSwitchNavigator,
    createBottomTabNavigator,
    createStackNavigator,
    createAppContainer,
} from 'react-navigation';
import MessageList from './MessageList';
import SubApplication from './SubApplication';
import Contacts from './Contacts';
import MineCenter from './MineCenter';
import LoginPage from './LoginPage';
import SettingPage from './SettingPage';


const TabNavigator = createBottomTabNavigator({
    message:{
        screen:MessageList,
    },
    subApp:{
        screen:SubApplication,
    },
    contacts:{
        screen:Contacts,
    },
    mine:{
        screen:MineCenter,
    }
}, {
        // tabBarItem整体配置
        initialRouteName: 'message',
        swipeEnabled: false,
        animationEnabled: false,
        lazy: true,
        tabBarOptions:{
            activeTintColor:'#1F8CEB',
            inactiveTintColor:'#4b4b4b',
        },
        backBehavior:'none'
    }
);

const StackNavigator = createStackNavigator(
    {
        tabBar: {
            screen: TabNavigator,
            navigationOptions:{
                header:null //返回null时可以隐藏导航栏bar
            }
        },
        detail: {
            screen: SettingPage,
            // navigationOptions : {
            //     title:'设置'
            // }
        }
    },
    {
        navigationOptions:({navigation}) => ({
            //title:navigation.state.routeName,
            headerStyle:{
                backgroundColor:'#f4511e',
            },
            headerTintColor:'#fff',
            headerTitleStyle:{
                fontWeight:'bold'
            }
        })
    }
);

7.登录+navigator+tabBarNavigatior

import {
    createSwitchNavigator,
    createBottomTabNavigator,
    createStackNavigator,
    createAppContainer,
} from 'react-navigation';
import MessageList from './MessageList';
import SubApplication from './SubApplication';
import Contacts from './Contacts';
import MineCenter from './MineCenter';
import LoginPage from './LoginPage';
import SettingPage from './SettingPage';


const TabNavigator = createBottomTabNavigator({
    message:{
        screen:MessageList,
    },
    subApp:{
        screen:SubApplication,
    },
    contacts:{
        screen:Contacts,
    },
    mine:{
        screen:MineCenter,
    }
}, {
        // tabBarItem整体配置
        initialRouteName: 'message',
        swipeEnabled: false,
        animationEnabled: false,
        lazy: true,
        tabBarOptions:{
            activeTintColor:'#1F8CEB',
            inactiveTintColor:'#4b4b4b',
        },
        backBehavior:'none'
    }
);

const StackNavigator = createStackNavigator(
    {
        tabBar: {
            screen: TabNavigator,
            navigationOptions:{
                header:null
            }
        },
        detail: {
            screen: SettingPage,
            // navigationOptions : {
            //     title:'设置'
            // }
        }
    },
    {
        navigationOptions:({navigation}) => ({
            //title:navigation.state.routeName,
            headerStyle:{
                backgroundColor:'#f4511e',
            },
            headerTintColor:'#fff',
            headerTitleStyle:{
                fontWeight:'bold'
            }
        })
    }
);


export default createAppContainer(createSwitchNavigator(
    {
        login: LoginPage,
        tabBarController: StackNavigator
    },{
        initialRouteName:'login'
    }
));