無需滾動即可反應原生水平列表視圖。 如何包裝物品？

Question

我正在顯示列表中的項目。 我不想使用水平滾動視圖，但如何包裝項目以使它們不會掉出屏幕？ 就像我們在android中有FlowLayout一樣。 圖為第一行第三項在屏幕外的一半

<List  horizontal={true} 
                            scrollEnabled={false}
                            style={{flexWrap: "wrap"}}
                            dataArray={articleData.Types}
                              renderRow={(Type) =>
                                <ListItem style={{borderBottomWidth: 0}} content>
                                    <Button rounded>
                                    <Text>{Type.Name}</Text>
                                    </Button>
                                </ListItem>
                            }>
                            </List>

Answer 1

可以使用視圖來實現這一點：

<View style={styles.wrapContainer}>
    {DATA.map(data => {
      return (
        <View style={styles.buttonContainer} >
          <Button title={data.name}/>
        </View>
      )})
    }
  </View>

工作示例