React-Native标签栏:删除水平线(React Native UI小猫+ React Navigation)

时间:2019-07-17 18:58:53

标签: javascript reactjs react-native react-native-ui-kitten

在iPhone上运行的我的应用程序中使用react-native-ui-kitten组件BottomNavigationBottomNavigationTab(博览会 v2.21.2 react-native v0 .57.1​​ ),当前选中的BottomNavigationTab顶部有一条水平线,其中同时包含标题和图标。

在我的应用中:

测试B 标签被选中,并且图标上方有多余的水平线。

enter image description here

来自文档:

BottomNavigation docs显示,同时定义了标题和图标时,所选选项卡上没有水平线。但这不是我的情况。

enter image description here

问题:如何删除水平线?

我的代码:

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

1 个答案:

答案 0 :(得分:2)

只需尝试将属性添加到SELECT... FROM... WHERE CASE WHEN @Billed = 1 THEN Freight > 0 WHEN @Billed = 0 THEN Freight = 0 ELSE Freight >= 0 END 组件:BottomNavigation。看起来我们已经忘记了在文档中显示此功能。希望这可以帮助。