reactjs - createBottomTabNavigator 具有针对不同选项卡的动态 tabStyle

Question

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

有没有办法使用诸如 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
                }
            }
        };
    }
});

宽度似乎有效，但所有三个选项卡仅使用激活的导航选项:

我不知道为什么颜色可以不同，为什么其他款式不可以呢？

有什么想法可以解决它吗？

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 属性，它让我可以为每个按钮返回一个自定义组件。对于每个按钮，react-navigation 已经传递了我们使用特定信息渲染按钮所需的信息。

其中一个信息是重点，让我知道哪个选项卡在特定时间呈现。

我们得到的另一个信息是默认样式表react-navigation用来渲染他的按钮，它是一个数组，这就是为什么我将它插入 props.style

在示例中，我使用 borderWidth: 1 样式创建按钮，但您可以根据您的需要进一步设置样式，我还留下了一个样式，您可以使用它来设置样式底部标签栏。

创建了 customBottomBar，您只需将其导入您定义 createBottomTabNavigator 的位置，并使用 tabBarComponent 传递它。

import BottomBar from "path/to/BottomBar"

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

如果我错过了某些内容或需要对特定内容进行解释，请告诉我