基于react-navigation 3.0+ createS

先上一个效果：

dmeo.gif

之前也有一篇文章写过, 处理特殊的TabBarItem(利用自定义TabBarComponent方式), 这里利用了更简洁的方式处理

注: 所有界面的导航栏都是自定义

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');
   };
   // 结束倒计时
   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. 路由结构 ==> 程序路口AppRouter

代码:

/**@desc 2019/5/24 路由设置*/
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,
      })
   }
);

创建底部栏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必须设置(否则报红)
      PlaceholderComponent: {
         screen: Plus,
      },

      Edu: {
         screen: Edu,
         navigationOptions: ()=>sTabBarOptions('教学', 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,
      // 此处设置的属性是控制全局, 而非某个局部组件
      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};
};

️: 单独设置Tab中间特殊TabBarItem

/**@desc 2019/5/25 独自设置 占位tabBarItem*/
Plus.navigationOptions = ({navigation}) =>{
   // tabBarButtonComponent: 它包装图标和标签并实现onPress; 重写此属性;
  // 返回数组, 还可以在数组中添加其他组件, 例如: 小红点
   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}
};