createBottomTabNavigator с динамическим tabStyle для разных вкладок

Question

В соответствии с документом , я могу изменить 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

Мне удалось добиться определенного поведения стиля вкладки в демонстрационном проекте, вот его основная часть,

Прежде всего, я создал 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
    }
})

Что я сделал здесь, так это то, что я экспортировал как-это 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} />
})

Дайте мне знать, если я что-то пропустил или мне нужно объяснение чего-то конкретного