createBottomTabNavigator 为不同的选项卡提供动态 tabStyle [英] createBottomTabNavigator with dynamic tabStyle for different tabs

问题描述

根据

所以我为 defaultNavigationOptions 创建了一个函数来为不同的标签动态分配 tabStyle:

//...const BottomNavigator = createBottomTabNavigator({用户:{屏幕:UsersStackNavigator，},仪表盘: {屏幕:DashboardStackNavigator，},优惠券:{屏幕:CouponsStackNavigator，}}, {defaultNavigationOptions: ({导航}) =>{//...const active = navigation.isFocused();常量宽度 = 活动 ?2 : 0;//这里输出 3 次，分别是 2, 0, 0返回 {//...选项卡选项:{//...标签样式:{填充顶部:10，边框顶部颜色:'#3A3AB5'，borderTopWidth: 宽度}}};}});

width 似乎有效，但所有三个选项卡都只使用激活的 navigationOptions:

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

任何想法如何解决它?

解决方案

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

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

从 'react' 导入 React从'react-navigation-tabs'导入{BottomTabBar}import { View, TouchableWithoutFeedback, Dimensions } from 'react-native'从'react-native'导入{样式表}；var { height } = Dimensions.get("window")const TouchableWithoutFeedbackWrapper = ({在新闻，在长按，测试ID，可访问性标签，...道具}) =>{if (props.focused) props.style.push(styles.tabBarStyle)返回 (<TouchableWithoutFeedbackonPress={onPress}onLongPress={onLongPress}测试ID={测试ID}命中斜率={{左:15，右:15，前5，底部:5，}}无障碍标签={无障碍标签}><查看{...道具}/></TouchableWithoutFeedback>)}导出默认 TabBarComponent = props =>{返回 {返回 TouchableWithoutFeedbackWrapper}}/>}const 样式 = StyleSheet.create({底部栏样式:{//如果你需要设置整个底部栏的样式},标签栏样式:{边框顶部宽度:1}})

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

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

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

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

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

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

从path/to/BottomBar"导入BottomBarcreateBottomTabNavigator({我的屏幕:{屏幕:我的屏幕}},{初始路由名称:"路由名称",tabBarComponent: (props) =><BottomBar {...props}/>})

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

According to the Document, I can change activeTintColor and activeBackgroundColor in tabBarOptions.

Is there a way to style the tab button with something like activeTabBarStyle?

I want to add a borderTop to the active tab, like this:

So I created a function for the defaultNavigationOptions to dynamically assign the tabStyle for different tabs:

// ...
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
                }
            }
        };
    }
});

The width seems working but all the three tabs are only using the activated navigationOptions:

I don't know why the color can be different why not other styles as well?

Any ideas how to work around with it?

解决方案

I was able to achieve a specific tab styling behaviour in a demo project, here's the essential part of it,

First of all, i created a customBottomBar using react-navigation-tabs bottomTabBar, this is the component i used:

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
    }
})

What i did here is that i exported as-is the BottomTabBar provided by react-navigation, so it kept the same style i defined on the createBottomTabNavigator level.

After that, i used the getButtonComponent props, that lets me return a custom component for every button. For every button, react-navigation already passes the informations we need to render the button with the specific infos.

One of those informations is focused that let's me know which tab is getting rendered in a specific time.

Another info we get is the default style table react-navigation uses to renders his button which is an array, that's why i'm pushing it inside props.style

In the example I'm creating the button with the borderWidth: 1 style, but you can style it further based off your needs, i've left also a style you can use to style the bottomTabBar.

Created the customBottomBar you just need to import it where you defined you createBottomTabNavigator and pass it using tabBarComponent.

import BottomBar from "path/to/BottomBar"

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

Let me know if i missed something or need explanation of something specific

这篇关于createBottomTabNavigator 为不同的选项卡提供动态 tabStyle的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！