react-navigation,StackNavigator,TabNavigator 导航使用

Z时代
2024-01-10
分类：综合

react

StackNavigator 参考这里

TabNavigator 参考这里

是一个组合，我把这2个写在一起了

代码：

import React, { Component } from \'react\';
import {StyleSheet,Text,Button,View,TabBarItem} from \'react-native\';
import {StackNavigator,TabNavigator} from \'react-navigation\';
import Icon from \'react-native-vector-icons/Feather\';//图标库
import { IS_ANDROID, IS_IOS } from \'./config/base\';
//底部导航栏 ----- start ---------
const TabSty = new Object();
if(IS_IOS){
    TabSty = {
        activeTintColor:\'#6b52ae\', //活动选项卡的标签和图标颜色。
//          activeBackgroundColor:\'#000\',//活动选项卡的背景颜色
            inactiveTintColor:\'#333\',//非活动选项卡的标签和图标颜色。
//          inactiveBackgroundColor:\'#fff\',//非活动选项卡的背景颜色
        labelStyle:{//标签标签的样式对象
                fontSize:12,
                marginBottom:5
            }
    }
}else if(IS_ANDROID){
    TabSty = {
        activeTintColor:\'#6b52ae\', //活动选项卡的标签和图标颜色。
            inactiveTintColor:\'#333\',//非活动选项卡的标签和图标颜色。
            showIcon:true,//是否显示标签图标，默认为false。
            pressOpacity:0.1,//按下标签的不透明度
            pressColor:\'#ccc\',//材质纹波的颜色（仅限Android> = 5.0）--按下的水印
            tabStyle:{//选项卡的样式对象。
                paddingTop:5
            },
            labelStyle:{//标签标签的样式对象
                fontSize:12,
            　　 margin:0
            },
            //选项卡指示符的样式对象（选项卡底部的行）。
            indicatorStyle:{
                height:0
            }
    }
}
//标签栏的样式对象。
TabSty.style = {
    height:50,
    backgroundColor:\'#fff\'
}
const Tab = TabNavigator(
    {
        Home:{
            screen: require(\'./components/index/index.js\').default,//该底部导航栏该项对应的页面
            navigationOptions: ({ navigation }) => ({
                title:\'消息\',//页面标题
                tabBarLabel: \'消息\',//导航栏该项标题
                tabBarIcon: ({ tintColor, focused }) => (  //tintColor -- 这个是  状态切换的时候给图标不同的颜色
                      <Icon name="message-square" style={{color:tintColor,fontSize:16}}/>       
                )  
            }),
        },
        Nearby:{
            screen: require(\'./components/index/index.js\').default,
            navigationOptions: ({ navigation }) => ({
                    title:\'工作台\',
                tabBarLabel: \'工作台\',
                tabBarIcon: ({ tintColor, focused }) => (  
                      <Icon name="home" style={{color:tintColor,fontSize:16}}/>       
                ) 
            }),
        },
        Message:{
            screen: require(\'./components/index/index.js\').default,
            navigationOptions: ({ navigation }) => ({
                    title:\'我的\',
                tabBarLabel: \'我的\',
                tabBarIcon: ({ tintColor, focused }) => (  
                   <Icon name="user" style={{color:tintColor,fontSize:16}}/>       
                ) 
            }),
        }
    },
    {
        tabBarPosition: \'bottom\',
        swipeEnabled: true,//标签之间进行滑动  
        animationEnabled: true,
        lazy: true,// 是否懒加载  
        tabBarOptions:TabSty
    }
);
//底部导航栏 ----- end ---------
//定义  StackNavigator  导航跳转 ---  start ------
//工作台模块
import indexRout from \'./rout/indexRout.js\';
const androidTitleSty = new Object();
const Navigator = StackNavigator(
    {
            Tab: {screen:Tab},
            ...indexRout
    },
    {
　　　　//设置导航栏公用的样式
        navigationOptions:({ navigation }) => ({
                //设置导航条的样式。背景色，宽高等 
                headerStyle:{
                },
                //设置导航栏文字样式
                headerTitleStyle:{
                    flex:1,
                    textAlign:\'center\',
                　　 fontWeight:\'normal\',
                　　 fontSize:15,
                　　 color:\'#666\'
                },
                headerBackTitle:null,
                //返回箭头重写
                headerLeft:() => {
                    return <Icon name="chevron-left" onPress={()=>navigation.goBack()}  style={styles.icon}/>;
                }
        })
    },
);
//定义  StackNavigator  导航跳转 ---  end ------
//样式
const styles = StyleSheet.create({
    icon:{
        fontSize:30,
        color:\'#444\',
        backgroundColor:\'transparent\'
    }
});
export default Navigator;

indexRout.js：

这个js的内容其实完全可以放在 Navigator 这个里面的 Tab 下面只是我想把它分开，所以分开写了

//工作台路由
export default rout = {
    //固定投资
    fixedInvestList:{
        screen:require(\'../components/index/fixedInvest/list.js\').default,
        navigationOptions:({ navigation }) => ({
            title:\'列表页面\'
        })
    },
    fixedInvestDetails:{
        screen:require(\'../components/index/fixedInvest/details.js\').default,
        navigationOptions:({ navigation }) => ({
            title:\'详情页面\'
        })
    }
}