ios - 在 react 导航中，如何获取标题和TabBar之间可见区域的尺寸？

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/