Question

我在我的本机应用程序中使用createBottomTabNavigator。应用程序运行平稳，但是我的视图隐藏在“底部标签导航器”的后面。我想在createBottomTabNavigator上面显示我的所有视图。标签更改后，如何在底部标签上方显示我的所有屏幕？

下面是我的Home.js代码。

% !TeX program = txs:///arara
% arara: pdflatex: {synctex: on, interaction: nonstopmode, shell: yes}

\documentclass{beamer}
\usepackage[most]{tcolorbox}

\begin{document}

\begin{frame}[fragile]

\begin{tcblisting}{
    comment only,
  pdf comment,
  compilable listing,
  run pdflatex,
}
\documentclass{article}
\begin{document}
\section{Section Title}
test
\end{document}
\end{tcblisting}

\end{frame}

\end{document}

下面是我的Dashboard.js代码

import Dashboard from './Dashboard';
import Leave from './Leave';
import Hour_Rec from './Hour_Rec';
import Rest_Holiday from './Rest_Holiday';
import Report from './Report';

const Home = createBottomTabNavigator({

    Dashboard: {
        screen: Dashboard,
        navigationOptions: {
            title: "Dashboard",
            tabBarIcon: ({ tintColor }) => (
                <Icon
                    name="gamepad-variant"
                    size={17}
                    color={tintColor} />
            )
        }
    },
    Leave: {
        screen: Leave,
        navigationOptions: {
            tabBarLabel: "Leave",
            tabBarIcon: ({ tintColor }) => (
                <Icon
                    name="movie"
                    size={17}
                    color={tintColor} />
            )
        }
    },
    Hour_Rec: {
        screen: Hour_Rec,
        navigationOptions: {
            tabBarLabel: "HR",
            tabBarIcon: ({ tintColor }) => (
                <Icon
                    name="music-note"
                    size={17}
                    color={tintColor} />
            )
        }
    },
    Rest_Holiday: {
        screen: Rest_Holiday,
        navigationOptions: {
            tabBarLabel: "RH",
            tabBarIcon: ({ tintColor }) => (
                <Icon
                    name="gamepad-variant"
                    size={17}
                    color={tintColor} />
            )
        }
    },
    Report: {
        screen: Report,
        navigationOptions: {
            tabBarLabel: "Report",
            tabBarIcon: ({ tintColor }) => (
                <Icon
                    name="music-note"
                    size={17}
                    color={tintColor} />
            )
        }
    }
});

//Issue: the tab navigator needs to be wrapped inside a stack navigator
export default createStackNavigator({ Home }, { headerMode: "none" });

Answer 1

@Moin Khan引发此问题，因为您使用的是屏幕总高度，并根据它划分按钮高度。总屏幕高度var { height } = Dimensions.get('window');还包括“底部标签导航器”高度。使用flex代替使用屏幕高度，可帮助您将内容区域划分为相等的部分。

只需更改您的样式，即可：

const styles = StyleSheet.create({
  container: {
    height: "100%"
  },
  box: {
    borderRadius: 10,
    alignItems: "center",
    justifyContent: "center"
  },
  box1: {
    flex: 1,
    backgroundColor: "#2196F3"
  },
  box2: {
    flex: 1,
    backgroundColor: "#8BC34A"
  },
  box3: {
    flex: 1,
    backgroundColor: "#e3aa1a"
  }
});

，否则，如果使用自定义BottomTabNavigator或能够获取BottomTabNavigator的默认高度只需减去 box_height 的高度即可。

就像您的bottomTabBar高度为30一样，则 var box_height =（高度-30）/ box_count;

如何在React Native中底部导航上方显示组件？

1 个答案: