我在我的本机应用程序中使用 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;
@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;
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句