React-Native 标签栏：移除水平线（React Native UI Kitten + React Navigation）

Question

在 iPhone 我的应用运行中使用 react-native-ui-kitten 组件 BottomNavigation 和 BottomNavigationTab（expo v2.21.2, react-native v0.57.1 ), 当前选中的 BottomNavigationTab 上方有一条横线，里面既有标题，也有图标。

来自我的应用程序：

测试 B 选项卡已选中，图标上方有不需要的水平线。

来自文档：

BottomNavigation docs说明当标题和图标都定义的时候，选中的tab上没有横线。但我不是这样的。

问题：横线怎么去掉？

我的代码：

import { View } from 'react-native';
import { createBottomTabNavigator, createStackNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';
import { BottomNavigation, BottomNavigationTab, BottomNavigationProps, Avatar } from 'react-native-ui-kitten';

class BottomNavigationShowcase extends React.Component {

    ... 

    render () {
        return (
            <BottomNavigation
                selectedIndex={this.state.selectedIndex}
                onSelect={this.onTabSelect}
            >
                <BottomNavigationTab title='Test A' icon={this.renderIconA} />
                <BottomNavigationTab title='Test B' icon={this.renderIconB} />
                <BottomNavigationTab title='Test C' icon={this.renderIconC} />
                <BottomNavigationTab title='Test D' icon={this.renderIconD} />
            </BottomNavigation>
        );
    }

}

const TabNavigator = createBottomTabNavigator(
    {
        TestA: TestAScreen,
        TestB: TestBScreen,
        TestC: TestCScreen,
        TestD: TestDScreen
    }, {
        initialRouteName: 'TestA',
        tabBarComponent: BottomNavigationShowcase
    }
)

const RootNavigator = createSwitchNavigator({
    Main: TabNavigator,
}, {
    initialRoute: "Main"
})

Answer 1

只需尝试将属性添加到 BottomNavigation-组件：appearance='noIndicator'。看起来我们忘记了在文档中显示此功能。希望这可以帮助。

React-Native 标签栏：移除水平线（React Native UI Kitten + React Navigation）

React-Native Tab Bar: Remove horizontal line (React Native UI Kitten + React Navigation)

javascript

reactjs

react-native

react-native-ui-kitten