关于ScrollView中嵌套FlatList的一点经验

今天需要做一个包含滚动，上拉加载的界面，由于滚动区域包含一部分非上拉加载的模块，如下图所示
（请忽略我一会上拉一会下拉，统一视为上拉，懒得改图了。。。）

通过尝试多次，发现，ScrollView如果和FlatList嵌套的话需要注意：

1. 两者嵌套后的关系

    {
                this.setState({ enableScrollViewScroll: true });
            }}>
            
            滚动区域

                        
               ...这一部分是不上拉加载但需滚动区域 ，即下图绿色区域        
            
                { this.state.topics.length?this.renderFlatList():null}//这里请求到数据后通过函数自动生成需要上拉加载的部分模块，即下图黄色区域


        

            
           
            

加载函数为

    renderFlatList=()=> {
        console.log(this.state.enableScrollViewScroll)
        console.log(this.state.scrollOffset)

        return (
             {
                    this.setState({ enableScrollViewScroll: false });//到FlatList区域后ScrollView和FlatList两区域的滚动区域重合，
                    //需要把外层的滚动设置为禁止滚动状态
                }}>
                 index.toString()}
                    onEndReachedThreshold={0.01}
                    onEndReached={this._reachend}
                    onMomentumScrollBegin={() => {
                        this.canLoadMore = true; //初始化时调用onEndReached的loadMore
                    }}
                    onScroll={this._onScroll2}
                    ref={this.myFlat}
                    refreshControl={//局部下拉加载。则把refresh正在加载的图标放到FlatList中
                        
                    }

                />
            
        );
    }

触底函数为

    _reachend=()=>{
        console.log('_reachend')
        if (this.canLoadMore && this.state.topics.length>=1) {//避免上拉时频繁加载，加载一次即终止
            console.log('_reachend-in')
            this.setState({
                refreshing:true
            })
            this.gettopics();  //加载更多
            this.canLoadMore = false;//一次上拉过程中，加载完一次立即阻止继续加载
        }

    }

产生data的函数为

 _renderItem =({item}) =>(
        
            
            {item.title}
            
                
                {item.nickname}
                
                {Math.round(item.readCount/1000)}k
            
        


    )

综上：

1. FlatList的 maxHeight={500}//此高度必须比第一次自动加载的撑起高度小，才能保证其能正常滚动和下拉加载
2. FlatList的 maxHeight={500}这个高度不要大到使不加载的区域从屏幕界面消失，否则将滚不回去
3. 注意避免上拉加载过程中频繁加载，使用canLoadMore一个布尔值控制