React Navigation2.0配置createBottomTabNavigator

今天药忘吃喽~ 2023-07-12 14:48 1阅读 0赞

// In App.js in a new project
    
    import React,{ Component } from 'react';
    import { View, Text ,StyleSheet,Image} from 'react-native';
    import { createStackNavigator,createBottomTabNavigator  } from 'react-navigation';
    
    import HelloWorld from '../components/HelloWorld.js';
    import HomeScreen from '../components/HomeScreen.js';
    import ModalScreen from '../components/ModalScreen.js';
    import First from '../components/First.js';
    import Second from '../components/Second.js';
    import Login from '../pages/Login';
    import Map from '../components/Map';
    import FlatList from '../components/FlatList';
    import SliderLife from '../components/SliderLife';
    import FlatListSwipeout from '../components/FlatListSwipeout';
    import CustomSlideRight from '../components/CustomSlideRight';
    import Payment from '../pages/payment.js';
    
    // 底部主界面
    const BottomTabStack= createBottomTabNavigator(
      {
        First: {
          screen:First,
          navigationOptions: (sizeTabBar('首页', 'First'))
        },
        Second: {
          screen:Second,
          navigationOptions: (sizeTabBar('地图', 'Second'))
        },
        Payment: {
          screen:Payment,
          navigationOptions: (sizeTabBar('支付', 'Payment'))
        },
      },
      {
        tabBarOptions: {
          activeTintColor: '#00B36A',
          inactiveTintColor: '#8E8E93',
          labelStyle: {
            fontSize: 12,
          },
          tabStyle:{
          },
          showIcon: true,
          pressColor: 'black',
          pressOpacity: 0.6,
          style: {
            backgroundColor: '#fff',
            height:70,
          },
        }
      },
    );
    
    export const MainStack =createStackNavigator(
      {
        HomeScreen: { screen: HomeScreen },
        HelloWorld: { screen: HelloWorld },
        Login: { screen: Login },
        First: { screen: First },
        FlatList: { screen: FlatList },
        SliderLife: { screen: SliderLife },
        CustomSlideRight: { screen: CustomSlideRight },
        Payment: { screen: Payment },
        Main: { screen: BottomTabStack ,
          navigationOptions: {
              header: null,
          }
        },
        Map: { screen: Map,
          // 设置头部header为null
          // navigationOptions: {
          //     header: null,
          // }
        },
        Home: {screen: Login }
      },
      {
        initialRouteName: 'Main',
      }
    )
    
    
    export default class CustomNavigator extends React.Component {
      static router = MainStack.router;
      render() {
        const { navigation } = this.props;
    
        return <MainStack navigation={navigation} />;
      }
    }
    
    //配置tab图标
    function sizeTabBar(tabName, tabIndex) {
      // console.log(tabName,tabIndex);
      return {
        tabBarLabel: ()=>{
          return <Text style={
       {height:0}}></Text>
        },
        showLabel: false,
        showIcon:false,
        tabBarVisible:true,// 是否显示底部导航
        pressOpacity:0.1,
        tabBarIcon: ({ tintColor, focused }) => {
          let imgIco = null;
          let imgDom = null;
          let imgStyle = null;
          switch (tabIndex) {
            case 'First':
              if (focused) {
                imgIco = require('../resource/images/homeactive.png');
              } else {
                imgIco = require('../resource/images/home.png');
              };
              imgStyle = styles.tabBarStyleHome;
              break;
            case 'Second':
              if (focused) {
                imgIco = require('../resource/images/mapactive.png');
              } else {
                imgIco = require('../resource/images/map.png');
              };
              imgStyle = styles.tabBarStyleMap;
              break;
            case 'Payment':
              if (focused) {
                imgIco = require('../resource/images/mapactive.png');
              } else {
                imgIco = require('../resource/images/map.png');
              };
              imgStyle = styles.tabBarStyleMap;
              break;
            default:
          }
          return <View style={styles.tabBarView}>
            <Image source={imgIco} style={imgStyle} />
            {tabIndex!=='Second'?(
              <View style={styles.tabBarText}>
                <Text>{tabName}</Text>
              </View>
            ):null}
          </View>
        },
      }
    }
    
    // 底部样式
    const styles = StyleSheet.create({
      tabBarStyleHome: {
        height: 20,
        width: 20,
      },
      tabBarStyleMap: {
        height: 19,
        width: 18,
      },
      tabBarStyleMessage: {
        height: 19,
        width: 22,
      },
      tabBarStyleMy: {
        height: 20,
        width: 18,
      },
      tabNameStyle:{
        flex:1,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'red',
        textAlign:'center',
        height:30,
      },
      tabBarView:{
        flexDirection:'column',
        alignItems:'center',
        justifyContent:'center',
        height:70,
        position:'relative',
        bottom:0,
    
      },
      tabBarText:{
        alignItems:'center',
        justifyContent:'center',
      },
    })