gpt4 book ai didi

javascript - React-Native 标签栏 : Remove horizontal line (React Native UI Kitten + React Navigation)

转载 作者:行者123 更新时间:2023-11-29 17:35:18 25 4
gpt4 key购买 nike

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

来 self 的应用:

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

最佳答案

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

关于javascript - React-Native 标签栏 : Remove horizontal line (React Native UI Kitten + React Navigation),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57082558/

25 4 0