0

我在 React Native Flatlist 中的 Picker 中检索了一些 JSON 数据，这些数据具有相同项目的两个以上属性，如下所示：

    {"products":
       [
        {
           "name": "Dried Blueberry",
           "weight": "1000gm",
           "price": "200"
        },
        {
          "name": "Dried Blueberry",
          "weight": "500gm",
          "price": "100"
        },
        {
          "name": "Dried Blueberry",
          "weight": "250gm",
          "price": "50"
        }
       ]
    }

它显示如下图片

但我想这样显示参考图像

有人会帮助我吗？

这是我的代码：

renderProductsCart = ({ item }) => {
    return (
      <View style={{ width: "46%", marginLeft: 10, marginTop: 10 }}>
        <Card
          elevation={2}>
          <Card.Cover source={{ uri: item.image }} />
          <Text style={{ marginLeft: 5 }}>{item.name}</Text>
          <Text> ₹: {item.attribute_price}/- </Text>
          <Picker
            selectedValue={this.state.data}

            onValueChange={(itemValue, itemIndex) => this.setState({ data: itemValue })} >

            {/* {this.state.city.map((item, key) => (
                        <Picker.Item label={item.name} value={item.name} key={key} />)
                    )} */}
            <Picker.Item label={item.attribute_name} value={item.attribute_name} />
          </Picker>
          <View style={{ flexDirection: "row" }}>
            <Card.Actions>
              <Button
                theme={{ colors: { primary: 'black' } }}
                onPress={() => console.log("press")}>View More</Button>
              <Button
                theme={{ colors: { primary: 'black' } }}
                onPress={() => console.log("press")}>Cart</Button>
            </Card.Actions>
          </View>
        </Card>
      </View>
    )
  }

<FlatList
data={this.state.data.attributes}
renderItem={this.renderProductsCart}
keyExtractor={(item, index) => index.toString()}
numColumns={2}
/>
4

3 回答 3

0

正如 Aymen Guidad 提到的，您必须将数据按摩到包含一组值的对象。

使用reduce，可以这样实现：

const data = [
  { name: 'Dried Blueberry', weight: '1000gm', price: '200' },
  { name: 'Dried Blueberry', weight: '500gm', price: '100' },
  { name: 'Dried Blueberry', weight: '250gm', price: '50' },
];

const products = data.reduce((acc, curr) => {
  const currentValue = acc[curr.name] || []

  acc[curr.name] = [...currentValue, { weight: curr.weight, price: curr.price }]

  return acc
}, {})

现在，在 React 上，您必须将其传递给 FlatList，但它需要一个数组，因此您必须在这个问题中执行类似大纲的操作：React Native FlatList with object

您map通常可以在您的 Picker 中覆盖您的数组。

于 2020-12-01T16:02:38.847 回答
0

您可以在这里尝试一些事情。

A）为卡片设置一个预定义的宽度（也许等于你设置的高度？）。然后您可以使用alignItems以便将卡放置在中间或左侧 - 不确定您想要的位置。

B）如果有偶数张卡片，您可以在最后添加一个空视图以填充此空间。我发现这种方法非常笨拙，但在尝试为未来元素留出空间时很有用。

C）简单地使用alignItems: 'space-between，我喜欢用它来居中项目，但你必须定义宽度

于 2020-12-01T10:16:46.427 回答
0

看来您需要编辑检索到的数据，每个名称都有其权重和价格。尝试使用map和reduce函数。

最后，你的数据应该是这样的。

{
  ...
   "Dried Blueberry": [ {"weight": "1000gm", "price": "200"},
                        {"weight": "500gm", "price": "100"},
                        {"weight": "250gm", "price": "50"} 
                      ]
 ...
}
于 2020-12-01T11:28:51.220 回答