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

近期的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.LTabSwitch) {
                this.setState((prevState, props) => ({
                    Lheight: height,
                    LTabSwitch: false
                }));
            } else if (this.LrState === 'Right' && this.state.RTabSwitch) {
                this.setState((prevState, props) => ({
                    Rheight: height,
                    RTabSwitch: false,
                }));
            }
            //判断是否是第一次取高度
            if(!this.state.firstTabSwitch) {
            //动态更改view的高度
                if (this.LrState === 'Left')
                    this.setState((prevState, props) => ({
                        tabViewStyle: {height: this.state.Lheight + 40},
                    }));
                else
                    this.setState((prevState, props) => ({
                        tabViewStyle: {height: this.state.Rheight + 40},
                    }));
            }else{
                this.setState({
                    firstTabSwitch:false
                })
            }
        }
       
    }

主要内容
（同时在最外面的Scrollview中设置ref属性为totop）

 }
             onChangeTab={(obj) => {this._handleTabHeight(obj)}}
             style={this.state.tabViewStyle}
             //预渲染所有界面
            prerenderingSiblingsNumber={Infinity}>
             
                      
             
             
                      
             

相应的state变量可以自己设置。
以上就是我的解决方法，其中还有一点不足：就是第一次浏览时，页面还是存在空白，但是在一次切换之后就会恢复正常，要做到第一次浏览时高度就确认，就需要在componentWillMount中进行tabViewStyle的赋值，但是在componentWillMount时无法得知组件的高度，所以要实现这样的操作只能提前知道两个组件的高度并且放在redux里面，然后在动态渲染，而两个组件的数据都是从服务器获取，并且还会根据数据个数改变。要做到这个，就需要根据数据个数估算组件可能的高度。然而这个就需要一个单独的接口，在最开始调用，同时获得估算的高度。
但是这个方法我不是很想用。。。所以就暂时这样吧，如果有朋友有需求首次加载时就是正常的。可以试试这个思路。

最后，好好学习，天天向上