具有不同宽度列表项的网格列表

Question

我正在努力实现这个设计

到目前为止我的输出看起来像这样

我不知道如何强制列表项占据整个行宽

这是我的代码：

    <View style={styles.list}>
       {listData.map(item => {    
          return (
            <Pressable style={styles.option}>
               <Text style={styles.optionTxt}>{item.name}</Text>
             </Pressable>
           );
       })}
  </View>

const styles = StyleSheet.create({
  list: {
     width: '85%',
     alignSelf: 'center',
     flexWrap: 'wrap',
     flexDirection: 'row',
     justifyContent: 'flex-start',
  },
  option: {
    backgroundColor: COLORS.backgroundText,
    borderRadius: 5,
    paddingVertical: 10,
    marginBottom: 10,
    justifyContent: 'center',
    alignItems: 'center',
    marginEnd: 10,
  },
  optionTxt: {
   textAlign: 'center',
   minWidth: '30%',
   paddingHorizontal: 13.5,
   },
})

Answer 1

终于修复了，只是将 flexGrow: 1 添加到 styles.option

具有不同宽度列表项的网格列表

Grid list with list items of different width

react-native