React Native 速成 007 — Stack Ove

细心的朋友可能发现，之前我们最外层的是 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: (
        <Icon
          name="calendar"
          size={30}
          type="evilicon"
          style={{ paddingLeft: 10 }}
        />
      ),
      headerRight: (
        <Icon
          name="search"
          size={30}
          type="evilicon"
          style={{ paddingRight: 10 }}
        />
      ),
      tabBarLabel: '首页',
      tabBarIcon: ({ tintColor, focused }) => (
        <Icon
          name='whatshot'
          size={30}
          type="MaterialIcons"
          color={tintColor}
        />
      ),
    }
  },
  ShopTab: {
    screen: ShopTab,
    path: '/shop',
    navigationOptions: {
      title: '面膜商城',
      headerLeft: (
        <Icon
          name="cart"
          size={30}
          type="evilicon"
          style={{ paddingLeft: 10 }}
        />
      ),
      headerRight: (
        <Icon
          name="search"
          size={30}
          type="evilicon"
          style={{ paddingRight: 10 }}
        />
      ),
      tabBarLabel: '面膜',
      tabBarIcon: ({ tintColor, focused }) => (
        <Icon
          name='face'
          size={30}
          type="MaterialIcons"
          color={tintColor}
        />
      ),
    }
  },
  UserTab: {
    screen: UserTab,
    path: '/user',
    navigationOptions: {
      title: '个人中心',
      headerLeft: (
        <Icon
          name="envelope"
          size={30}
          type="evilicon"
          style={{ paddingLeft: 10 }}
        />
      ),
      headerRight: (
        <Icon
          name="comment"
          size={30}
          type="evilicon"
          style={{ paddingRight: 10 }}
        />
      ),
      tabBarLabel: '我的',
      tabBarIcon: ({ tintColor, focused }) => (
        <Icon
          name='account-circle'
          size={30}
          type="material-community"
          color={tintColor}
        />
      ),
    }
  }
},
{
  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 }) => (
  <ScrollView>

    <Tile
       imageSrc={require('../images/card.jpg')}
       title="敷点面膜"
       featured
       caption="自律带来美丽"
       height={200}
    />

    <Card
      image={{uri:'http://image.tianjimedia.com/uploadImages/2011/253/437L1Y9HRN2U.jpg'}}>
      <Text style={{marginBottom: 10}}>
        The idea with React Native Elements is more about component structure than actual design.
      </Text>
      <Button
        icon={{name: 'code'}}
        backgroundColor='#03A9F4'
        buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
        title='登录'
        onPress={() => navigation.navigate('Login')} />
    </Card>

    <Card
      title='热门套餐'
      image={{uri:'http://image.tianjimedia.com/uploadImages/2011/253/437L1Y9HRN2U.jpg'}}>
      <Text style={{marginBottom: 10}}>
        The idea with React Native Elements is more about component structure than actual design.
      </Text>
      <Button
        icon={{name: 'code'}}
        backgroundColor='#03A9F4'
        buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0}}
        title='注册'
        onPress={() => navigation.navigate('Register')} />
    </Card>

    <PricingCard
      color='#4f9deb'
      title='Free'
      price='$0'
      info={['1 User', 'Basic Support', 'All Core Features']}
      button={{ title: 'GET STARTED', icon: 'flight-takeoff' }}
    />
  </ScrollView>
)


export {HomeTab}

可以参考 React Navigation 的示例程序

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