javascript 如何在React Native中创建2行3列可见的水平滚动平面列表？

2ledvvac 于 2023-01-29 发布在 Java

关注(0)|答案(4)|浏览(166)

我想创建一个2行3列可见的水平滚动平面列表。数据将是动态的从API。我已经设法创建垂直滚动平面列表看起来像这样：

。有numOfColumns来指定列数，但没有指定行数。当我尝试设置horizontal={true}时，布局变得奇怪：

还抛出numOfColumns无法与水平滚动平面列表一起应用的错误。请参考随附的屏幕截图了解所需的输出：

.
我的垂直滚动平面列表代码：

<FlatList
        ref={(ref) => { this.flatListRef = ref; }}
        style={{ width: '90%', marginTop: 10, marginLeft: 10, backgroundColor: 'transparent', borderRadius: 5, alignSelf: 'center' }}
        bounces={false}
        // horizontal={true}
        numColumns={3}
        data={this.state.categoryData}
        renderItem={({ item: data, index }) => {
        return (
          <ServiceView viewWidth={'100%'} viewHeight={'100%'} viewPaddingLeft={1} viewPaddingRight={10} viewPaddingTop={1} viewPaddingBottom={12} serviceName={(globalUserType == 'provider') ? data.services.name : data.name} serviceIconUrl={(globalUserType == 'provider') ? data.services.image : data.image} jobCount={(globalUserType == 'provider') ? '' : ''} showDot={(globalUserType == 'provider') ? false : false} 
           serviceAction={
           () => this.navigateTo('category', data)

         }/>

我应该做什么改变，以获得所需的输出。

JavaScript

来源：https://stackoverflow.com/questions/59137025/how-to-create-horizontal-scrolling-flatlist-with-2-rows-and-3-columns-visible-in

4条答案

按热度按时间

oipij1gg1#

class App extends Component {
  renderItemForFirstList = ({item, index}) => {
    <FlatList
      data={item}
      renderItem={this.renderItemForSecondList}
    />
  }
  render() {
    return (
      <View>
        <FlatList
          data={this.state.categoryData}
          renderItem={this.renderItemForFirstList}
        />
      </View>
    );
  }
}

赞(0）回复(0）举报 2023-01-29

0tdrvxhp2#

您可以通过在垂直平面列表项中添加水平平面列表来实现此目的，如下所示：

Vertical FlatList
<FlatList  
   data={[  
   {imageKey: 'image1',imageKey: 'image2',imageKey: 'image3'},{imageKey: 'image4',imageKey: 'image5',imageKey: 'image6'},{imageKey: 'image7',imageKey: 'image8',imageKey: 'image9'} ]}  
    renderItem={({item}) =>  
       <FlatList  
         horizontal={true}
         showsHorizontalScrollIndicator={false}
         data={item}  
         renderItem={({item}) =>  
          <Text>{item.key}</Text>}  
       /> 
   />

赞(0）回复(0）举报 2023-01-29

syqv5f0l3#

尝试从这种类型的json数组数据呈现此问题的所需输出时，发生了相同的问题

[{"id": 1, "name": "John", "image": "/api/12.jpg"}, {"id": 2, "name": "James", "image": "/api/14.jpg"}, {"id": 3, "name": "David", "image": "/api/172.jpg"} ...]

我尝试了很多方法来呈现两行格式，但是都不行。所以，我把json改成了这些格式

[
      [
         {"id": 1, "name": "John", "image": "/api/12.jpg"}, 
         {"id": 2, "name": "James", "image": "/api/14.jpg"}, 
         {"id": 3, "name": "David", "image": "/api/172.jpg"} 
           ...
      ],
      [
         {"id": 9, "name": "Kim", "image": "/api/12hj.jpg"}, 
         {"id": 10, "name": "Jim", "image": "/api/14ff.jpg"}, 
         {"id": 11, "name": "Rose", "image": "/api/1723.jpg"} 
         ...
      ]
]

有两种方法可以得到这种类型的json格式
1.从后端API
1.通过在componentDidmount或函数中使用Javascript代码将jsonarray拆分为块数组，从而将块数组拆分为一个数组。
然后，您可以使用此代码执行此问题所需的输出

<ScrollView
      
        horizontal={true}
        showsHorizontalScrollIndicator={false}
      
      >
        //two row formated json array
        {this.state.checkData.map((dd, index) => 
          
            <FlatList
           
            contentContainerStyle={{alignSelf: 'flex-start'}}
            numColumns={3} //<---------- here we can change the number of rows
            data={dd}
            renderItem={({ item: rowData }) => {
           
              return (
                <TouchableOpacity style={{ padding: 6}} onPress={() => this.props.navigation.navigate('RDetails', { id: rowData.id })}>

                  <View style={{flex: 1, height:110, width: 96}}>

                  
                  <View style={{ flex: 1 }}>
                    <Image resizeMode='stretch' style={{ borderRadius: 5, width: 80, height: 70, margin: 2 }} source={{ uri: rowData.image }} />

                  </View>
                  
              </View>

                </TouchableOpacity>
              );

            }
            }
            keyExtractor={(item, index) => index.toString()}
          />
        )}
      </ScrollView>

赞(0）回复(0）举报 2023-01-29

igsr9ssn4#

还有另一种方法可以使用Lodash中的**_. chunk**。
示例：

{_.chunk(data, 2).map((item, index) => (
  <View key={index} style={{flexDirection: "column"}>
  {item.map((subItem, subIndex) => (

  <Text key={subIndex}>{subItem}</Text>

  ))}
  </View>
))}

赞(0）回复(0）举报 2023-01-29

我来回答

javascript 如何在React Native中创建2行3列可见的水平滚动平面列表？

4条答案

相关问题

热门标签

最新问答