Question

我想创建如下图所示的视图：我是React Native的初学者。 =>我必须使用哪个控件？ =>如何设计App架构？

Answer 1

建议的模型类型

[{
   type:"MOST_SEARCHED",
   data:[],//your data comes here for horizontal row's
   orientation:'horizontal'
 },
 {
   type:"BLOGS",
   data:[],//your data comes here for horizontal row's
   orientation:'horizontal'
 }]

此后，您需要设计视图（内部组件）

 _wallList=(item)=>{
 return( <Carousel
        data={item.data}
        extraData={this.state}
        inactiveSlideScale={1}
        renderItem={(item) => {
                if (wallType === MOST_SEARCHED) {
                   this._renderMostSearched()// view for most searched
                }   
        }}
        sliderWidth={SLIDER_WIDTH}
        itemWidth={SLIDER_WIDTH - 32}
  />)
 }

外部平面列表

  <FlatList
        ref={(c) => {
              this._flatList = c
            }}
        style={{overflow: 'visible'}}
        directionalLockEnabled={true}
         data={this.state.data}
         renderItem={(item) => (this._wallList(item))}
         refreshing={this.state.refreshing}
         onRefresh={this._refreshHome}
         onScroll={this.handleScroll} />

如何在iOS和Android的React Native中的垂直滚动中创建水平列表

1 个答案: