具有动态tabStyle的createBottomTabNavigator，用于不同的选项卡

Question

根据Document，我可以在activeTintColor中更改activeBackgroundColor和tabBarOptions。

是否可以使用诸如activeTabBarStyle之类的标签按钮样式？

我要向活动标签添加borderTop，如下所示：

因此，我为defaultNavigationOptions创建了一个函数，为不同的标签页动态分配了tabStyle：

// ...
const BottomNavigator = createBottomTabNavigator({
    Users: {
        screen: UsersStackNavigator,
    },
    Dashboard: {
        screen: DashboardStackNavigator,
    },
    Coupons: {
        screen: CouponsStackNavigator,
    }
}, {
    defaultNavigationOptions: ({ navigation }) => {
        // ...
        const active = navigation.isFocused();
        const width = active ? 2 : 0;  // This outputs 3 times, which are 2, 0, 0
        return {
            // ...
            tabBarOptions: {
                // ...
                tabStyle: {
                    paddingTop: 10,
                    borderTopColor: '#3A3AB5',
                    borderTopWidth: width
                }
            }
        };
    }
});

width似乎可以正常工作，但是所有三个选项卡都仅使用激活的navigationOptions：

我不知道为什么颜色可以不同，为什么其他样式也一样？

任何想法如何解决？

Answer 1

我能够在演示项目中实现特定的标签样式设置行为，这是其中的重要部分，

首先，我使用react-navigation-tabs bottomTabBar创建了一个customBottomBar，这是我使用的组件：

import React from 'react'
import { BottomTabBar } from 'react-navigation-tabs'
import { View, TouchableWithoutFeedback, Dimensions } from 'react-native'
import { StyleSheet } from 'react-native';
var { height } = Dimensions.get("window")

const TouchableWithoutFeedbackWrapper = ({
    onPress,
    onLongPress,
    testID,
    accessibilityLabel,
    ...props
}) => {
    if (props.focused) props.style.push(styles.tabBarStyle)
    return (
        <TouchableWithoutFeedback
            onPress={onPress}
            onLongPress={onLongPress}
            testID={testID}
            hitSlop={{
                left: 15,
                right: 15,
                top: 5,
                bottom: 5,
            }}
            accessibilityLabel={accessibilityLabel}
        >
            <View {...props} />
        </TouchableWithoutFeedback>
    )
}

export default TabBarComponent = props => {
    return <BottomTabBar
        {...props}
        style={styles.bottomBarStyle}
        getButtonComponent={() => {
            return TouchableWithoutFeedbackWrapper
        }}
    />
}

const styles = StyleSheet.create({
    bottomBarStyle: {
        //if you need to style the whole bottom bar
    },
    tabBarStyle: {
        borderTopWidth: 1
    }
})

我在这里所做的是，我按原样导出了react-navigation提供的BottomTabBar，因此它保持了与我在createBottomTabNavigator级别上定义的样式相同。

之后，我使用了getButtonComponent道具，让我为每个按钮返回了一个自定义组件。对于每个按钮，反应导航已经传递了我们需要的信息，以使按钮具有特定的信息。

其中一个信息是focused，让我知道在特定时间呈现了哪个标签。

我们得到的另一个info是默认样式表react-navigation用于呈现其按钮，该按钮是一个数组，这就是为什么我将其推入props.style

在示例中，我将使用borderWidth: 1样式创建按钮，但是您可以根据需要对按钮进行进一步的样式设置，我还剩下了可用于对bottomTabBar进行样式设置的样式。

创建customBottomBar时，只需将其导入您定义createBottomTabNavigator的位置，然后使用tabBarComponent进行传递即可。

import BottomBar from "path/to/BottomBar"

createBottomTabNavigator({
   myScreen:{
      screen:myScreen
   }
   },{
   initialRouteName:"routeName",
   tabBarComponent: (props) => <BottomBar {...props} />
})

让我知道我是否错过了某件事或需要对某些具体事情进行解释