Question

我目前在React-Native的底部导航中遇到样式问题。

当前底部导航

当前，我正在使用以下代码创建底部导航。


const TabNavigator = createBottomTabNavigator({
    Home: {
        screen: Home,
        navigationOptions: {
            tabBarLabel: 'home',
            tabBarIcon: ({tintColor}) => (
                <Image
// Icon with styling here
                />
            )
        },
    },

    Settings: {
        screen: Settings,
        navigationOptions: {
            tabBarLabel: 'settings',
            tabBarIcon: ({tintColor}) => (
                <Image
// Icon with styling here
                />
            )
        },
    },
}, {
    tabBarOptions: {
// Styling here
    }
});

const AppContainer = createAppContainer(TabNavigator);

这很好。

所需的最终情况

我正在尝试在标签之间实现一个浅蓝色的小缝隙。

这看起来像这样：

https://imgur.com/EZsWpof

有人知道使用React Navigation甚至有可能解决问题吗？

Answer 1

按照我在评论中发布的示例，添加实际的borderWidth，我想像是在TouchableWithoutFeedbackWrapper函数内部，您做了类似的事情：

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

这将在每个按钮之间添加边框，但还将在您最后一个按钮处添加边框。

要解决此问题，您需要更改getButtonComponent道具（在bottomBar中传递）中呈现按钮的方式。

此道具是一个buttonComponent，它将当前按钮route作为参数传递。

因此您可以这样做：

<BottomTabBar
   ...
   getButtonComponent={ ({route}) => {
      if(route.name === "Settings") return TouchableWithoutFeedbackWrapperWithoutBorder
      else return TouchableWithoutFeedbackWrapper
      } 
   }

然后TouchableWithoutFeedbackWrapperWithoutBorder将是普通按钮：

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

让我知道是否有不清楚的地方

React-Native如何在底部导航的单个选项卡上添加边框？

1 个答案: