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

最新推荐文章于 2025-11-12 09:54:46 发布

原创

最新推荐文章于 2025-11-12 09:54:46 发布 · 3.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native

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

近期的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: heigh

最低0.47元/天解锁文章