react native Scrollview嵌套ScrollableTabView,ScrollableTabView中嵌套Flatlist展示item不全的问题

      之前项目中,遇到过一个问题就是Scrollview嵌套了ScrollableTabView,ScrollableTabView中又嵌套Flatlist,
当Flatlist数据超过一屏时,view会被截取,且不可滑动。下面分析一下为什么出现这个问题:

    原因:react native 官方组件 ScrollView 默认会撑满父级容器高度。
    解决方案:react native 官方组件需要在 ScrollView 外面嵌套父级组件来约束高度
,比如嵌套一个 View 设置 
height为screenHeight(屏幕高度);我们在使用Scrollview的过程中,首先需要在其外层包裹一层View(指定固定高度),
然后Scrollview设置flex:1自适应铺满,这里给大家看一下,我的布局大致是这样的,有些具体逻辑省略了,这种情况下,


        let maxH = dimens.screenHeight; //屏幕高度
        //根据UI设计动态计算ScrollView内部view的高度
        if(this.state.data.length && this.state.data.length>2 ){
            //这里仅仅提供一种思路,具体的你们可以根据实际情况动态算这个高度
            maxH = maxH + (this.state.data.length-2)*dimens.scale(105); //如果超过2个item,加上每个item高度是105
        }

 
           
                         // 这里的maxH就是动态计算的高度,根据Flatlist的item数量来决定
                                                                                    initialPage={0}
                                            renderTabBar={() =>                                                 style={styles.SegmentTabBarStyle}
                                                activeTextColor={colors.wideFont}
                                                inactiveTextColor={colors.wideFont}
                                                activeTextFontSize={20}
                                                inactiveTextFontSize={18}
                                                activeViewStyle={styles.activeViewStyle}
                                                inactiveViewStyle={styles.inactiveViewStyle}
                                                underlineStyle={{height: 0}}/>}
                                            onChangeTab={this.changeRoomEvent}
                                        >
                                                                                            style={styles.flatListStyle}
                                                renderItem={this.listDeviceItemVIew}
                                                keyExtractor={(item, index) => 'index' + item + index}
                                                data={this.state.data}
                                                numColumns={1}
                                                showsVerticalScrollIndicator={false}
                                                bounces={false}
                                            />              
                                       
                                      
              
           


以上这种方法即可达到,无论item数量是多少个,都可以显示完全,页面数据不会被截取。欢迎补充,谢谢~

你可能感兴趣的:(react,native)