React native中react-native-scrollable-tab-view组件中的页面高度问题

在React Native应用中使用react-native-scrollable-tab-view时,遇到切换页面高度不一致导致的滚动冲突。通过使ScrollableTabView高度动态变化,根据实际页面高度自适应,解决了切换时高度不同造成的空白问题。尽管初次加载时仍可能出现空白,但通过在componentWillMount中预先获取组件高度并存储在Redux中,可以根据服务器数据估算组件高度,从而在首次加载时实现正确显示。这是一个临时解决方案,期待更好的方法。
摘要由CSDN通过智能技术生成
近期的react native bug	

最近在学习React native ,期间用到了react-native-scrollable-tab-view组件,他的ScrollableTabView很好用,但是我需要在其中的切换的页面高度是不确定的,两者不一定等高,所以产生了一个问题。 因为我的这个大的页面最外层是包裹了一层Scrollview的导致ScrollableTabView中的两个切换的页面因为滑动冲突没办法在切换的页面外包裹Scrollview,所以导致最外层的Scrollview的高度是由最内部组件的高度自适应的。切换的页面两者高度不一时,再切换滑动时会出现高度少的者下方会出现大量空白。为了解决这个问题,想了很多办法,最后确定的解决方法是让ScrollableTabView的高度动态变化,而高度就使用实时获得的两个页面的高度。
代码如下:

函数部分

_handleTabHeight(obj) {
//页面切换时跳到顶部
            this.refs.totop.scrollTo({x: 0, y: 0, animated: false});
//通过ref获得当前页面的高度计算方法
        this.refs[obj.ref.props.tabLabel].measure(this._setTabHeight.bind(this));
        this.LrState = obj.ref.props.tabLabel;
      
    }

    _setTabHeight(ox, oy, width, height, px, py) {
       //高度不为零时才进行高度计算
        if (height != 0) {
        //获取左右的高度
            if (this.LrState === 'Left' && this.state
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值