细心的朋友可能发现，之前我们最外层的是 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 的示例程序
