createBottomTabNavigator 为不同的选项卡提供动态 tabStyle

IT技术 reactjs react-native react-navigation
2021-05-19 01:28:48

根据文档，我可以更改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：

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

在此处输入图片说明

任何想法如何解决它？

1个回答

我能够在演示项目中实现特定的选项卡样式行为，这是它的重要部分，

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

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关卡中定义的相同样式。

之后，我使用了getButtonComponentprops，这让我为每个按钮返回一个自定义组件。对于每个按钮，react-navigation 已经传递了我们需要使用特定信息呈现按钮的信息。

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

info我们得到的另一个是默认样式表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} />
})

让我知道我是否遗漏了某些内容或需要对某些特定内容进行解释

其它你可能感兴趣的问题
上一篇react-admin：如何在 Datagrid 的每一行上显示删除按钮 下一篇想要动态处理关于分页的页码显示：ReactJS