React Native 中的 BottomNavigation

Question

我在我的 React Native 项目中创建了一个底部导航。但它在 Iphone10 中看起来不太好。它在 bottom.Please 中显示额外的 space 帮助我解决这个问题。这是我试过的代码。

  import BottomNavigation,{FullTab} from 'react-native-material-bottom-navigation' 

      <BottomNavigation
          onTabPress={newTab => this.clickoftab(newTab.key)}
          renderTab={this.renderTab}
          tabs={this.tabs}
        />

我的渲染标签部分是这个

        renderTab = ({ tab, isActive }) => {
         return (
          <FullTab
          style={{padding:0,margin:0}}
          key={tab.key}
          isActive={isActive}
          label={tab.label}
          renderIcon={this.renderIcon(tab.icon)} 
          />
       )
     }

这是我想在底部导航中更改的输出

Answer 1

根据您的架构应用程序，如果像您在评论中所说的那样，如果您使用 SafeAreaView 我想在 SafeAreaView 的相同 level 中创建 BottomNavigation =].我的意思是（对不起我的英语），我想你的 "Father file" 中有 SafeAreaView，比如 App.js。因此，同时您可以从那里管理 BottomNavigation。所以，你可以把 SafeAreaView 放在 BottomNavigation 里面，我想 BottomNavigation 是你应用程序的父亲。不知道我解释的好不好。结论可能是

just apply SafeArea To things that are inside of Navigation instead of full application.

React Native 中的 BottomNavigation

BottomNavigation in react native

react-native

bottomnavigationview