Question

所以我有这个要求。要使标签导航具有这种确切的外观：

使用渐变色和按钮样式化标签栏时，我没有问题。我用以下代码创建了自己的自定义代码：

export default createBottomTabNavigator({
  (... routes here)
}, {
  initialRouteName: "Inspiration",
  tabBarComponent: props => <BottomTabBar {...props} />
})

但是现在我在中间按钮上遇到了麻烦。我的酒吧看起来像这样：

如果我删除自定义标签栏，则删除此行：

tabBarComponent: props => <BottomTabBar {...props} />

然后，现在我的中间按钮看起来应该是应该的，但是当然，所有其他样式都缺失了：

这是我的BottomTabBar组件现在的外观：

import React from "react";
import { Image, StyleSheet, Text, TouchableOpacity } from "react-native";
import { TabBarBottomProps, NavigationRoute } from "react-navigation";
import LinearGradient from "react-native-linear-gradient";

const iconBag = require("./images/bag.png");

export default function BottomTabBar(props: TabBarBottomProps) {
  const {
    renderIcon,
    getLabelText,
    activeTintColor,
    inactiveTintColor,
    onTabPress,
    onTabLongPress,
    getAccessibilityLabel,
    navigation
  } = props;

  const { routes, index: activeRouteIndex } = navigation.state;

  function renderTabBarButton(routeIndex, route) {
    const isRouteActive = routeIndex === activeRouteIndex;
    const tintColor = isRouteActive ? activeTintColor : inactiveTintColor;

    if (route.key == "Bag")
      return <Image style={{ width: 100, height: 100 }} source={iconBag} />;
    return (
      <TouchableOpacity
        key={routeIndex}
        style={styles.tabButton}
        onPress={() => onTabPress({ route })}
        onLongPress={() => onTabLongPress({ route })}
        accessibilityLabel={getAccessibilityLabel({ route })}
      >
        {renderIcon({ route, focused: isRouteActive, tintColor })}
        <Text style={styles.tabText}>{getLabelText({ route })}</Text>
      </TouchableOpacity>
    );
  }

  return (
    <LinearGradient colors={["#FFFFFF", "#DEDEDE"]} style={styles.container}>
      {routes.map((route, routeIndex) => renderTabBarButton(routeIndex, route))}
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  container: {
    height: 60,
    flexDirection: "row",
    alignItems: "center",
    borderWidth: 1,
    borderColor: "#C4C4C4"
  },
  tabButton: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  tabText: {
    fontFamily: "Source Sans Pro",
    fontSize: 11,
    color: "#454545",
    marginTop: 1
  }
});

我该怎么办？任何帮助将不胜感激！

Answer 1

我使用react native将此底部选项卡制成。我认为您的设计非常简单。我的代码示例将为您提供帮助。

import React from 'react';
import { createBottomTabNavigator, createStackNavigator } from 'react-navigation';
import { View, Image } from 'react-native'
import { Text } from 'native-base';

import Featured from './featured';
import AboutUs from './about_us';
import Shop from './shop';
import Booking from './booking';
import Settings from './settings';
import styles from './styles';

import star from './../../assets/images/icons/star.png';
import star_check from './../../assets/images/icons/star_check.png';
import about from './../../assets/images/icons/about.png';
import about_check from './../../assets/images/icons/about_check.png';
import book from './../../assets/images/icons/book.png';
import check from './../../assets/images/icons/check.png';
import shop from './../../assets/images/icons/shop.png';
import shop_check from './../../assets/images/icons/shop_check.png';
import more from './../../assets/images/icons/more.png';
import more_check from './../../assets/images/icons/more_check.png';

const Tabs = createBottomTabNavigator(
    {
        Featured: {
            screen: Featured,
            navigationOptions: {
                title: 'Featured',
                tabBarIcon: ({ tintColor, focused }) => (
                        <View style={styles.tab}>
                            <Image source={focused? star_check : star} style={styles.icon} />
                            <Text style={[styles.name, {color: tintColor}]}>Kampanjer</Text>
                        </View>
                    )
            }
        },
        AboutUs: {
            screen: AboutUs,
            navigationOptions: {
                title: 'About Us',
                tabBarIcon: ({ tintColor, focused }) => (
                            <View style={styles.tab}>
                                <Image source={focused? about_check : about} style={styles.icon} />
                                <Text style={[styles.name, {color: tintColor}]}>Om oss</Text>
                            </View>
                        )
            }
        },
        Booking: {
            screen: Booking,
            navigationOptions: {
                title: 'MIN SALONG',
                tabBarIcon: ({ tintColor, focused }) => (
                            <View style={styles.book}>
                                <Image source={focused? check : book} style={styles.book_icon} />
                            </View>
                        )
            }
        },
        Shop: {
            screen: Shop,
            navigationOptions: {
                title: 'Shop',
                tabBarIcon: ({ tintColor, focused }) => (
                            <View style={styles.tab}>
                                <Image source={focused? shop_check : shop} style={styles.icon} />
                                <Text style={[styles.name, {color: tintColor}]}>Shop</Text>
                            </View>
                        )
            }
        },
        Settings: {
            screen: Settings,
            navigationOptions: {
                title: 'More',
                tabBarIcon: ({ tintColor, focused }) => (
                            <View style={styles.tab}>
                                <Image source={focused? more_check : more} style={styles.icon} />
                                <Text style={[styles.name, {color: tintColor}]}>Inställningar</Text>
                            </View>
                        )
            }
        },
    },
    {
        initialRouteName: 'Featured',
        tabBarOptions: {
            activeTintColor: '#80A0AB',
            inactiveTintColor: '#fff',
            showLabel: false,
            style: {
                height: 60,
                backgroundColor: '#485155'
            },
            labelStyle: {
                fontSize: 12,
                fontFamily: 'Abel-Regular'
            }
        }  
    }
);

export default createStackNavigator({Tabs}, {headerMode: "none"});

Answer 2

enter image description here

您可以尝试我的解决方案

const TabNavigator = createBottomTabNavigator(
{
Top: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      <Image
        source={require('./src/assets/ic_list.png')}
        style={{width: 24, height: 24, tintColor: tintColor}}
      />
    ),
  },
},

New: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      <Image
        source={require('./src/assets/ic_clock.png')}
        style={{width: 24, height: 24, tintColor: tintColor}}
      />
    ),
  },
},
Ask: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      <View
        style={{
          position: 'absolute',
          bottom: 20, // space from bottombar
          height: 58,
          width: 58,
          borderRadius: 58,
          backgroundColor: '#5a95ff',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Image
          source={require('./src/assets/ic_add_24.png')}
          style={{
            width: 40,
            height: 40,
            tintColor: '#f1f6f9',
            alignContent: 'center',
          }}
        />
      </View>
    ),
  },
},
Show: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      <Image
        source={require('./src/assets/ic_notification.png')}
        style={{width: 24, height: 24, tintColor: tintColor}}
      />
    ),
  },
},
Jobs: {
  screen: HomeScreen,
  navigationOptions: {
    tabBarIcon: ({tintColor}) => (
      <Image
        source={require('./src/assets/ic_person.png')}
        style={{width: 24, height: 24, tintColor: tintColor}}
      />
    ),
  },
},
},
{
tabBarOptions: {
  activeTintColor: '#FF6F00',
  inactiveTintColor: '#8997B0',
  showIcon: true,
  showLabel: false,
  style: {
    backgroundColor: '#f1f6f9',
  },
},
},
);

Answer 3

尝试

<Tab.Navigator
            tabBarOptions={{
                activeTintColor: 'red',
               // activeBackgroundColor:'#000',
                //inactiveBackgroundColor:'red',
                labelStyle: {
                     position: 'absolute',
                     top: constants.vh(35),
                    fontSize:constants.vh(18),
                }
            }}
        >
            <Tab.Screen name='Home' //bottom tab for Home
                options={{
                    tabBarIcon: ({ focused }) => {
                        let iconName;
                        iconName = focused ? constants.images.bottomHome : constants.images.bottomHome //for icon or image
                        return (
                            <View>
                                <Image source={iconName} style={{ width: constants.vw(40), height: constants.vh(25) ,position:'absolute',right:constants.vw(-20),bottom:constants.vh(-5)}} resizeMode="contain" />
                            </View>
                        )
                    }
                }}
                component={HomeScreen} />
</Tab.Navigator>

React-Navigation：如何在标签导航中设置大的中间按钮的样式？

3 个答案:

尝试