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

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

从'../../ native-base-theme / variables / platform'

导入toolbarHeight

Answer 2

可悲的是，NativeBase.Header没有公开Height。

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

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

在 155 行查看here。您将在 300 行<{3}}后结束。

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

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

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

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 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>

希望它会有所帮助：）

Answer 5

我在iPhone X上遇到问题，我的native base 页眉在使用SafeAreaView时从顶部开始添加填充。那么我提供了以下解决方法它可以解决您的问题

我已经在iPhone X，8和android上对其进行了测试

import {StatusBar, TouchableOpacity, View, SafeAreaView,platform,Dimensions} from "react-native";
const deviceHeight = Dimensions.get('window').height;
const deviceWidth = Dimensions.get('window').width;
const platformStyle = undefined;

const isIphoneX =
Platform.OS === 'ios' &&
(deviceHeight === 812 ||
deviceWidth === 812 ||
deviceHeight === 896 ||
deviceWidth === 896);

<Header style={{paddingTop: isIphoneX ? -10 : 15,maxHeight:50,minHeight:50}}>

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

5 个答案: