react-navigation3.0后TabNavigator的使用

一、react-navigation3.0后TabNavigator和StackNavigator的使用

// 导航栏
import {
    createStackNavigator,
    createAppContainer,
    createBottomTabNavigator,
} from 'react-navigation';

class TabBarItem extends Component {

    render() {
        return (
            
                
                {this.props.name}
            
          
        )
    }

}
const MyTabNavigator = createBottomTabNavigator({
    AppointmentRevisitPage: {
        screen: AppointmentRevisitPage,
        navigationOptions: {
            tabBarLabel: ({tintColor, focused}) => (
                
            ),

        },

    },

    NetworkConsultRoomPage: {
        screen: NetworkConsultRoomPage,
        navigationOptions: {
            tabBarLabel: ({tintColor, focused}) => (
                
            ),
            
        }
    },
    MyRevisitPage: {
        screen: MyRevisitPage,
        navigationOptions: {
            tabBarLabel: ({tintColor, focused}) => (
                
            ),
        }
    },
    MinePage: {
        screen: MinePage,
        navigationOptions: {
            tabBarLabel: ({tintColor, focused}) => (
                
            ),
        },
    },

},
{
    // tabBarComponent:MyTabNavigator,
    tabBarPosition: 'bottom',  // 显示在底端，android 默认是显示在页面顶端的
    lazy: true, // 是否懒加载
    // initialRouteName: 'HomePage',
    animationEnabled: false, // 切换页面时是否有动画效果
    activeTintColor: 'red',
    swipeEnabled: false,//是否使用滑动切换
    tabBarOptions: {
        // pressOpacity: 0.8,
        activeTintColor: '#E35454', // 文字和图片选中颜色
        inactiveTintColor: '#999999', // 文字和图片未选中颜色
        // activeBackgroundColor:'white',
        showIcon: false, // android 默认不显示 icon, 需要设置为 true 才会显示
        showLabel:true,
        style: {
            height: 50,
            backgroundColor: 'white',
        },
        indicatorStyle: {
            height: 0  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
        },

    }
});


const Components = {

    /**
     * tab主页
     */
    MyTabNavigator: {
        screen: MyTabNavigator,
    },
    /**
     * 列表
     */
    DoctorListPage:{screen:DoctorListPage},
    /**
     * 详情
     */
    DoctorDetailPage:{screen:DoctorDetailPage},
    
};
// 创建导航
const MainNavigator = createStackNavigator({
    // 路由界面
    ...Components,
}, 
{
        headerLayoutPreset: "center",
        // 属性设置
        defaultNavigationOptions: ({ navigation, screenProps }) => ({
            headerStyle: {
                backgroundColor:'#F4F4F4',
                borderBottomWidth: 0,
                elevation: 0,
            },
            headerBackTitle: null,
            gesturesEnabled: true,
            headerBackImage: ,
        }),

    }
    );
const AppNavigator = createAppContainer(MainNavigator);

二、解决 TabNavigator中的screen标题不能动态改变的问题

// 动态设置第一层级的标题
MyTabNavigator.navigationOptions = ({ navigation }) => {
    const { routes, index } = navigation.state;
    const navigationOptions = {};

    
   if (routes[index].routeName === 'AppointmentRevisitPage') {
       
      navigationOptions.title = '互联网'; 
      //设置StatusBar状态
      StatusBar.setBarStyle('default', false);

   }else if (routes[index].routeName === 'NetworkConsultRoomPage') {

        navigationOptions.title = '诊室'; 
        //设置StatusBar状态
        StatusBar.setBarStyle('default', false);

   }else if (routes[index].routeName === 'MyRevisitPage') {

        navigationOptions.header = null;
        //设置StatusBar状态
        StatusBar.setBarStyle('light-content', false);

    }else if (routes[index].routeName === 'MinePage') {
        //设置StatusBar状态
        StatusBar.setBarStyle('default', false);
        navigationOptions.title = '我的'; 

    }
    navigationOptions.headerLeft = (
                 {
                    }}>
                    
                );

    return navigationOptions;
}

三、跨tab路由处理/代码切换tab

应用在AppointmentRevisitPage路由处理完一些操作后需要跳转到NetworkConsultRoomPage的tab，实现了代码切换tab

// 使用reset action重置路由
        const resetAction = StackActions.reset({
            index: 0,  // 注意不要越界
            actions:[NavigationActions.navigate({ 
                routeName: 'MyTabNavigator',//返回到首页tab
                action:NavigationActions.navigate({
                    routeName: 'NetworkConsultRoomPage', // 这个是tabs 里面的任何一个tab
                })
            })]
        });
        this.props.navigation.dispatch(resetAction);