如何在本机反应中显示底部导航上方的组件？

Question

我在我的 react 本机应用程序中使用 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;

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 = (height - 30) / box_count;