Rn(reactnative) 全背景方案，headerTitle浮动盖住了控件问题解决方案，动态header高度上边距

最新推荐文章于 2023-03-29 16:04:56 发布

你的鹏鹏鹏

最新推荐文章于 2023-03-29 16:04:56 发布

阅读量459

点赞数

分类专栏： react native 文章标签： react native

本文链接：https://blog.csdn.net/csdn_lwp/article/details/113355219

版权

react native 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在render方法，你的view外层添加如下代码即可让编辑内容置于header下方：

// 需要引入的依赖
import { HeaderHeightContext } from '@react-navigation/stack';

/** 在class内部的render方法，布局外层进行
嵌套<HeaderHeightContext.Consumer>布局下方
就可以直接使用headerHeight参数，设置到内部
View的style中，给个marginTop:headerHeight
就可以解决了

*/
render(){
    return (
        <HeaderHeightContext.Consumer>
          {headerHeight =>(/** 你的布局代码嵌套到这里 */
                <View style={{marginTop:headerHeight}}>
                    <Text style={{color:'#333'}}>啦啦啦，我就在标题下方</Text>
                </View>
          )}
        </HeaderHeightContext.Consumer>;
    );
}