Javascript 反应本机选项卡栏：删除水平线（反应本机UI Kitten+；反应导航）

在iPhone上运行的我的应用程序（expo v2.21.2，

react native

v0.57.1）中使用

react native ui kitten

组件

BottomNavigation

和

BottomNavigationTab

，当前选定的

BottomNavigationTab

顶部有一条水平线，其中包含标题和图标

从我的应用程序：

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

测试B选项卡被选中，并且在图标上方有不需要的水平线

来自文档：

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

显示在同时定义标题和图标时，所选选项卡上没有水平线。但我不是这样

问题：如何删除水平线

我的代码：

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

从'react native'导入{View}；
从“反应导航”导入{CreateBoottomTabNavigator、createStackNavigator、createSwitchNavigator、createAppContainer}；
从“react native ui kitten”导入{BottomNavigation，BottomNavigationTab，BottomNavigationProps，Avatar}；
类BottomNavigationShowcase扩展React.Component{
... 
渲染（）{
返回(
);
}
}
const TabNavigator=createBottomTabNavigator(
{
TestA:TestAScreen，
TestB:TestBScreen，
TestC:TestCScreen，
TestD:TestDScreen
}, {
initialRouteName:'TestA'，
tabBarComponent:BottomNavigationShowcase
}
)
const RootNavigator=createSwitchNavigator({
主：TabNavigator，
}, {
初始路线：“主”
})

只需尝试向

底部导航组件添加一个属性：
外观='noIndicator'
。看起来我们忘记在文档中显示此功能了。希望这有帮助