const viewableWindowHeight = Dimensions.get('window')。height - Header.HEIGHT - ???
如何获得TabBar高度?如果iPhone是X怎么办?我怎么能考虑到这一点?
解决方案1
如果你想直接计算可视窗口高度,那么你可以使用onLayout回调,例如,在每页的标签导航上,
render() {
return (
<View style={{ flex: 1}} onLayout={(event) => {
var {x, y, width, height} = event.nativeEvent.layout;
this.viewableWindowHeight=height;
// use height as viewableWindowHeight
}} />
<ScollView>
//Your scrollable contant
</ScrollView>
</View>
);
解决方案2
根据反应导航中的问题,您无法直接计算底部标签栏的高度。但是,如果将底部标签栏包装到视图中,则可以将视图高度计算为底部标签栏。考虑下面的例子
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { View } from 'react-native';
import { BottomTabBar } from 'react-navigation';
class TabBarComponent extends Component {
measure = () => {
if (this.tabBar) {
this.tabBar.measureInWindow(this.props.setTabMeasurement);
}
}
render() {
return (
<View
ref={(el) => { this.tabBar = el; }}
onLayout={this.measure}
>
<BottomTabBar {...this.props} />
</View>
);
}
}
function mapDispatchToProps(dispatch) {
return {
setTabMeasurement: (x, y, width, height) => dispatch({
type: 'SET_TAB_MEASUREMENT',
measurement: {
x, y, width, height,
},
}),
};
}
export default connect(null, mapDispatchToProps)(TabBarComponent);
试试这个:
import { Dimensions, Platform } from 'react-native';
import {
getStatusBarHeight,
getBottomSpace,
} from 'react-native-iphone-x-helper';
import { Header } from 'react-navigation';
const { height } = Dimensions.get('window');
const stackHeaderHeight = Header.HEIGHT;
/* Taken from source code of react-navigation-tabs*/
const TAB_BAR_DEFAULT_HEIGHT = 49;
const TAB_BAR_COMPACT_HEIGHT = 29;
const TAB_BAR_HEIGHT = this.bottomTabBarRef._shouldUseHorizontalLabels() && !Platform.isPad
? TAB_BAR_COMPACT_HEIGHT
: TAB_BAR_DEFAULT_HEIGHT;
const marginTop = getStatusBarHeight() + stackHeaderHeight;
const marginBottom = getBottomSpace() + TAB_BAR_HEIGHT;
// < What you're after
const viewableWindowHight = height - marginTop - marginBottom;
对于TBBAR
根据这种方法确定的条件,高度在这两个值>> TAB_BAR_COMPACT_HEIGHT
和TAB_BAR_DEFAULT_HEIGHT
之间变化:
根据react-navigation-tabs源代码。
要么
您可以将initialLayout
设置为TabNavigatorConfig
中提到的documentation:
initialLayout - 可以传递包含初始高度和宽度的可选对象,以防止react-native-tab-view呈现中的一帧延迟。
对于IPHONE-X
您可以通过react-native-iphone-x-helper npm模块安全地访问Iphone-X中的statusBar height,bottomSpace
你可以简单地使用SafeAreaView,它会自动设置topBarHeight主要用于iPhoneX手机。