React-navigation：如何在选项卡导航中设置大中间按钮的样式？

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

你可以试试我的解决方案

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: { // big plus icon in the middle
  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 2

\n\n

我用 React Native 制作了这个底部选项卡。我认为你的设计非常简单。我认为我的代码示例会对您有所帮助。

\n\n

import React from \'react\';\nimport { createBottomTabNavigator, createStackNavigator } from \'react-navigation\';\nimport { View, Image } from \'react-native\'\nimport { Text } from \'native-base\';\n\nimport Featured from \'./featured\';\nimport AboutUs from \'./about_us\';\nimport Shop from \'./shop\';\nimport Booking from \'./booking\';\nimport Settings from \'./settings\';\nimport styles from \'./styles\';\n\nimport star from \'./../../assets/images/icons/star.png\';\nimport star_check from \'./../../assets/images/icons/star_check.png\';\nimport about from \'./../../assets/images/icons/about.png\';\nimport about_check from \'./../../assets/images/icons/about_check.png\';\nimport book from \'./../../assets/images/icons/book.png\';\nimport check from \'./../../assets/images/icons/check.png\';\nimport shop from \'./../../assets/images/icons/shop.png\';\nimport shop_check from \'./../../assets/images/icons/shop_check.png\';\nimport more from \'./../../assets/images/icons/more.png\';\nimport more_check from \'./../../assets/images/icons/more_check.png\';\n\nconst Tabs = createBottomTabNavigator(\n    {\n        Featured: {\n            screen: Featured,\n            navigationOptions: {\n                title: \'Featured\',\n                tabBarIcon: ({ tintColor, focused }) => (\n                        <View style={styles.tab}>\n                            <Image source={focused? star_check : star} style={styles.icon} />\n                            <Text style={[styles.name, {color: tintColor}]}>Kampanjer</Text>\n                        </View>\n                    )\n            }\n        },\n        AboutUs: {\n            screen: AboutUs,\n            navigationOptions: {\n                title: \'About Us\',\n                tabBarIcon: ({ tintColor, focused }) => (\n                            <View style={styles.tab}>\n                                <Image source={focused? about_check : about} style={styles.icon} />\n                                <Text style={[styles.name, {color: tintColor}]}>Om oss</Text>\n                            </View>\n                        )\n            }\n        },\n        Booking: {\n            screen: Booking,\n            navigationOptions: {\n                title: \'MIN SALONG\',\n                tabBarIcon: ({ tintColor, focused }) => (\n                            <View style={styles.book}>\n                                <Image source={focused? check : book} style={styles.book_icon} />\n                            </View>\n                        )\n            }\n        },\n        Shop: {\n            screen: Shop,\n            navigationOptions: {\n                title: \'Shop\',\n                tabBarIcon: ({ tintColor, focused }) => (\n                            <View style={styles.tab}>\n                                <Image source={focused? shop_check : shop} style={styles.icon} />\n                                <Text style={[styles.name, {color: tintColor}]}>Shop</Text>\n                            </View>\n                        )\n            }\n        },\n        Settings: {\n            screen: Settings,\n            navigationOptions: {\n                title: \'More\',\n                tabBarIcon: ({ tintColor, focused }) => (\n                            <View style={styles.tab}>\n                                <Image source={focused? more_check : more} style={styles.icon} />\n                                <Text style={[styles.name, {color: tintColor}]}>Inst\xc3\xa4llningar</Text>\n                            </View>\n                        )\n            }\n        },\n    },\n    {\n        initialRouteName: \'Featured\',\n        tabBarOptions: {\n            activeTintColor: \'#80A0AB\',\n            inactiveTintColor: \'#fff\',\n            showLabel: false,\n            style: {\n                height: 60,\n                backgroundColor: \'#485155\'\n            },\n            labelStyle: {\n                fontSize: 12,\n                fontFamily: \'Abel-Regular\'\n            }\n        }  \n    }\n);\n\nexport default createStackNavigator({Tabs}, {headerMode: "none"});\n

\n