navigationOptions: ({ navigation }) => ({tabBarIcon: ({ tintColor }) => {const { routeName } =navigation.state;constICON_MAP= { PersonalInfo:'user', MerchandiseList:'archive', NewMerchandise:'plus', MerchandiseGrid:'th', MerchandiseDetail:'info-circle', TransactionRecord:'list', ShoppingCart:'shopping-cart' };// You can return any component that you like here! We usually use an// icon component from react-native-vector-iconsconstrouteParams=navigation.state.params || {};return ( <BadgeIconname={ICON_MAP[routeName] ||''}size={42}color={tintColor}numberOfBadges={routeParams.numberOfBadges} /> ); }})
部分頁面關掉TabBar顯示或是部分頁面打開 StackNavigator's Header
headerMode - Specifies how the header should be rendered:
float - Render a single header that stays at the top and animates as screens are changed. This is a common pattern on iOS.
screen - Each screen has a header attached to it and the header fades in and out together with the screen. This is a common pattern on Android.
const AppNavigator = new TabNavigator(
{
MerchandiseGrid: new StackNavigator(
{
MerchandiseGrid: {
screen: MerchandiseGrid,
navigationOptions: { title: '商城', header: null } // disable header but open all headers in here
},
MerchandiseDetail: {
screen: MerchandiseDetail,
navigationOptions: { title: '商品詳細', tabBarVisible: false }
}
},
{
headerMode: 'screen'
}
),
}