先上一個效果：

dmeo.gif

之前也有一篇文章寫過, 處理特殊的TabBarItem(利用自定義TabBarComponent方式), 這里利用了更簡潔的方式處理

注: 所有界面的導(dǎo)航欄都是自定義

1. 可以看到開始時的廣告(可作為動畫廣告)

代碼:

/**@desc 2019/5/25 可作為倒計時廣告*/  

SCountdownButton: 自定義倒計時組件

class CountDownAD extends Component {
   render() {
      return (
         <View style={styles.container}>
            <Image source={Icon.ad_show} style={styles.adStyle}/>
            <SCountdownButton
               style={styles.timerStyle}
               title={'跳過廣告'}
               timeLength={3}
               isAutoCountdown={true}
               onClick={this.skipAD}
               endCountdownFunction={this.endCountdownFunction}
            />
         </View>
      );
   }

   // 跳過廣告
   skipAD = ()=>{
      this.props.navigation.navigate('SRootRouter');
   };
   // 結(jié)束倒計時
   endCountdownFunction = ()=>{
      this.skipAD();
   }
}

const styles = StyleSheet.create({
   container: {
      flex: 1,
      backgroundColor: 'white',
   },

   adStyle: {
      flex: 1,
   },

   timerStyle: {
      width: 60,
      height: 60,
      top: statusBarHeight + 10,
      right: 30,
      borderRadius: 40,
      backgroundColor: 'rgba(170, 170, 170, 0.85)'
   }
});

2. 路由結(jié)構(gòu) ==> 程序路口AppRouter

代碼:

/**@desc 2019/5/24 路由設(shè)置*/
export const AppRouter = createAppContainer(
   createSwitchNavigator(
      {
          CountDownAD,
          // Edu,
         "SRootRouter": SRootScreen,
      },

      {
         initialRouteName: 'CountDownAD'
      }
   )
);

3. SRootScreen根路由

代碼:

const RootRouter = createStackNavigator(
  {
     Tab: {
        screen: STabScreen
     },

     Login: {
        screen: SLoginScreen
     },

     Plus: {
        screen: SPlusScreen
     }
  },

  {
     initialRouteName: 'Tab',
     mode: "modal",
     defaultNavigationOptions: ({navigation})=>({
        header: null,
        gesturesEnabled: false,
     })
  }
);

4.Tab路由

代碼: 需要包裹一層StackNavigator, 除了需要Modal的界面, 所有push的界面需要在此處添加

const TabStackNavigator = createStackNavigator(
   {
      Tab: {
         screen: TabBarNavigator
      },
      MyAccount: {
         screen: MyAccount
      },
      SystemMsg: {
         screen: SystemMsg
      },
   },

   {
      initialRouteName: 'Tab',
      mode: "card",
      defaultNavigationOptions: ({navigation})=>({
         header: null,
         gesturesEnabled: true,
      })
   }
);

創(chuàng)建底部欄createBottomTabNavigator

const TabBarNavigator = createBottomTabNavigator(
   {
      Campus: {
         screen: Campus,
         navigationOptions: ()=>sTabBarOptions('校園', Icon.tabBarItem_campus_def, Icon.tabBarItem_campus_sel)
      },

      Circle: {
         screen: Circle,
         navigationOptions: ()=>sTabBarOptions('圈子', Icon.tabBarItem_circle_def, Icon.tabBarItem_circle_sel)
      },

      // 占位組件, 但screen必須設(shè)置(否則報紅)
      PlaceholderComponent: {
         screen: Plus,
      },

      Edu: {
         screen: Edu,
         navigationOptions: ()=>sTabBarOptions('教學(xué)', Icon.tabBarItem_edu_def, Icon.tabBarItem_edu_sel)
      },

      Me: {
         screen: Me,
         navigationOptions: ()=>sTabBarOptions('我', Icon.tabBarItem_me_def, Icon.tabBarItem_me_sel)
      },
   },

   {
      initialRouteName: 'Campus',
      lazy: true,
      // 此處設(shè)置的屬性是控制全局, 而非某個局部組件
      defaultNavigationOptions: ({navigation})=>({
         tabBarOptions: {
            inactiveTintColor: colorConfig.grayColor,
            activeTintColor: colorConfig.themeColor,
            labelStyle: {
               fontSize: 13.5,
               marginTop: 3.5
            },
            tabStyle: {
               marginTop: 5
            }
         }
      })
   }
);

const sTabBarOptions = (tabBarItemTitle, tabBarItemDef, tabBarItemSel) =>{
   const tabBarLabel = tabBarItemTitle;
   const tabBarIcon = ({ focused, horizontal, tintColor })=> {
      return !focused? <Image style={styles.tabBarIconStyle} source={tabBarItemDef}/> : <Image style={styles.tabBarIconStyle} source={tabBarItemSel}/>
   };

   return {tabBarLabel, tabBarIcon};
};

?: 單獨設(shè)置Tab中間特殊TabBarItem

/**@desc 2019/5/25 獨自設(shè)置 占位tabBarItem*/
Plus.navigationOptions = ({navigation}) =>{
   // tabBarButtonComponent: 它包裝圖標和標簽并實現(xiàn)onPress; 重寫此屬性;
  // 返回數(shù)組, 還可以在數(shù)組中添加其他組件, 例如: 小紅點
   const tabBarButtonComponent: any = (props: any)=>{
      return [<TouchableOpacity
         {...props}
         style={styles.plusTabBarItemStyle}
         activeOpacity={1}
         key={'tabBar'}
         // 攔截點擊事件, 點擊后的selectedIndex保持原來的值
         onPress={()=>navigation.navigate('Plus')}
      >
         <Image style={{width: 35, height: 35}} source={Icon.tabBarItem_plus}/>
      </TouchableOpacity>];
   };

   return {tabBarButtonComponent}
};