React Native 速成 007 — Stack Over Tab 和 Tab over Stack

细心的朋友可能发现，之前我们最外层的是 Tab navigator，Stack Navigator的定义在每个Tab里面。这样的效果就是，每次跳转到一个Stack定义的页面，下方的Tab一直都存在，比如跳转到登录注册页面。

而实际上，Tab导航应当只有Tab本身页面下方有Tabbar，其余其他页面下方都不应该有Tabbar，把它的空间让给其他操作，通过 「返回键」或者「滑动屏幕」返回上一页面层级。

接下来我们就从 Tab Over Stack 修改为 Stack Over Tab。

最终得到效果如下：

Tab页面下方有Tabbar

下方没有Tabbar

• App.js *

import React from 'react';
import { Icon, View } from 'react-native-elements';
import { TabNavigator, StackNavigator } from 'react-navigation';

import { HomeTab } from './tabs/HomeTab'
import { ShopTab } from './tabs/ShopTab'
import { UserTab } from './tabs/UserTab'

import { LoginView } from './views/LoginView'
import { RegisterView } from './views/RegisterView'

const MainScreen = TabNavigator({
  HomeTab: {
    screen: HomeTab,
    path: '/',
    navigationOptions: {
      title: '敷点面膜',
      headerLeft: (
        
      ),
      headerRight: (
        
      ),
      tabBarLabel: '首页',
      tabBarIcon: ({ tintColor, focused }) => (
        
      ),
    }
  },
  ShopTab: {
    screen: ShopTab,
    path: '/shop',
    navigationOptions: {
      title: '面膜商城',
      headerLeft: (
        
      ),
      headerRight: (
        
      ),
      tabBarLabel: '面膜',
      tabBarIcon: ({ tintColor, focused }) => (
        
      ),
    }
  },
  UserTab: {
    screen: UserTab,
    path: '/user',
    navigationOptions: {
      title: '个人中心',
      headerLeft: (
        
      ),
      headerRight: (
        
      ),
      tabBarLabel: '我的',
      tabBarIcon: ({ tintColor, focused }) => (
        
      ),
    }
  }
},
{
  initialRouteName: 'HomeTab',
  animationEnabled: true,
  swipeEnabled: false,
  tabBarOptions: {
    activeTintColor: '#e91e63',
  },
})

const StacksOverTabs = StackNavigator({
  Home: {
    screen: MainScreen,
  },
  Login: {
    screen: LoginView,
  },
  Register: {
    screen: RegisterView,
  }
})



export default StacksOverTabs;

HomeTab.js

import React from 'react';
import { StackNavigator } from 'react-navigation';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { Card, PricingCard, ListItem, Button, Tile, Icon } from 'react-native-elements';


const HomeTab = ({ navigation }) => (
  

    

    
      
        The idea with React Native Elements is more about component structure than actual design.
      
       navigation.navigate('Login')} />
    

    
      
        The idea with React Native Elements is more about component structure than actual design.
      
       navigation.navigate('Register')} />
    

    
  
)


export {HomeTab}

可以参考 React Navigation 的示例程序

https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/StacksOverTabs.js