const viewableWindowHeight = Dimensions.get('window')。height-Header.HEIGHT-???
如何获得TabBar的高度?
如果iPhone是X,该怎么办?我该如何考虑?
最佳答案
如果您想直接计算可见窗口的高度,则可以使用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>
);
根据 react 导航中的一个问题,您无法直接计算底部标签栏的高度。但是,如果将底部标签栏包装到 View 中,然后可以将该 View 高度计算为底部标签栏。考虑下面的例子
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);
关于ios - 在 react 导航中,如何获取标题和TabBar之间可见区域的尺寸?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55152318/