以编程方式检索标头组件高度 - React Native

Question

使用NativeBase，我添加了一个Header组件。现在，我想以编程方式检索标头的高度。我怎样才能做到这一点。添加标头的代码如下：

我尝试使用Dimensions.get('window')，但它给了我整个视图的高度。

代码：

import React, {Component} from 'react-native';
import {Container, Header, Button, Title, Icon} from 'native-base';
​
export default class ThemeHeaderExample extends Component {
    render() {
        return (
                <Header>
                    <Button transparent />

                    <Title>Header</Title>

                </Header>
        );
    }
}

Answer 1

可悲的是，NativeBase.Header没有暴露高度。

我遇到了同样的问题，我深入研究代码，我意识到Height以这种方式被编码：

toolbarHeight: platform === "ios" ? 64 : 56

看看第155行的here。你将在第300行跟随Header Component结束。

虽然这可能有用，但似乎并不是我们想要做的事情，或者至少，固定的解决方案似乎很难看。

所以，我所做的是创建我自己的Header，这非常简单直接，因为它只是一个包装器，并使用“refs measure”功能，允许我们获得位置和大小。你可以看到一个例子here。

基本上，它应该是这样的：

render() {
    return (
      <View style={styles.container} ref="yourComponent">
        <TouchableOpacity onPress={this.measureYourComponent}>
          <Text>Measure it</Text>
        </TouchableOpacity>
      </View>
    );
}

measureYourComponent() {
    this.refs.yourComponent.measure((ox, oy, width, height, px, py) => {
        console.log("ox: " + ox); //Relative position
        console.log("oy: " + oy); //Relative position
        console.log("width: " + width);
        console.log("height: " + height);
        console.log("px: " + px); //Absolute position
        console.log("py: " + py); //Absolute position
      });
}

在我的情况下，我需要根据孩子的大小从某个父母做出反应，所以将OnPress处理程序替换为其父级提供的Handler。

通过这种方式，尽管您需要更多的努力，但您将获得更灵活和可重用的解决方案。

如果有什么需要澄清，请告诉我。

Answer 2

我通过导入变量并使用它来解决它。

从'../../native-base-theme/variables/platform'导入toolbarHeight

Answer 3

我不使用原生基础，但你应该能够使用onLayout道具：https://facebook.github.io/react-native/docs/view.html#onlayout

Answer 4

我遇到了同样的问题，这就是我修复它的方法。

给出具有所需高度（例如20）和paddingTop为0的样式。

<Header style={{height: 20, paddingTop:0}}>
    <Button transparent />

    <Title>Header</Title>

</Header>

希望能帮助到你 ：）