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

我在我的本机应用程序中使用 createBottomTabNavigator。应用程序运行顺利，但我的视图隐藏在底部选项卡导航器后面。我想在 createBottomTabNavigator 上方显示我的所有视图。如何在更改选项卡时将我的所有屏幕显示在底部选项卡上方？

下面是我的 Home.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" });

下面是我的 Dashboard.js 代码

var { height } = Dimensions.get('window');
var box_count = 3;
var box_height = height / box_count;

class Dashboard extends PureComponent {

  static navigationOptions = {
    title: 'Chat',
    headerStyle: { backgroundColor: 'red' },
    headerTitleStyle: { color: 'green' },
  }

  render() {
    return (
      <View style={styles.container}>
            <View style={[styles.box, styles.box1]}>
              <Text style={{ fontSize: 40 }}>Active Leave</Text>
            </View>
            <View style={[styles.box, styles.box2]}>
              <Text style={{ fontSize: 40 }}>Upcoming Leave</Text>
            </View>
            <View style={[styles.box, styles.box3]}>
              <Text style={{ fontSize: 40 }}>Absent status</Text>
            </View>
        </View>
    );
  }
}

const styles = StyleSheet.create({

  box: {
    height: box_height,
    borderRadius:10,
    alignItems: 'center', 
    justifyContent: "center",
  },
  box1: {
    backgroundColor: '#2196F3'
  },
  box2: {
    backgroundColor: '#8BC34A'
  },
  box3: {
    backgroundColor: '#e3aa1a'
  }
});

export default Dashboard;