Question

我正在开发一个应用，用户可以在其中添加商品名称，描述，数量和图片网址，并将其存储在AsyncStorage中。我做好了准备，它看起来像这样：

现在我正试图从Asyncstorage获取它并获得一个2D数组。这是代码：

myA1 = await AsyncStorage.getItem('key1');
   var ee=JSON.parse(myA1); //ee is 2D array

看起来像这样

[[imgurl1 itemname1, desc1, quantity1],
 [imgurl2 itemname2, desc2, quantity3],
 [imgurl3 itemname3, desc2, quantity3],
 [imgurl4 itemname4, desc2, quantity3]]

我怎样才能实现这一目标？我是反应原生的初学者

我想按如下方式显示

：

Answer 1

您使用FlatList来渲染数据列表。它有一个renderItem道具，你可以传递一个视图来渲染每一行数据。将您的数据置于此代码中的状态（data）。这是一个例子：

makeContentItem(item) {
        return (
            <TouchableOpacity
                onPress={() => {
                    //Do sth when clicking on a row
            }}>
                <View style={{ width: '90%', height: 140, marginBottom: 5, borderRadius: 2, backgroundColor: 'white' }}>
                    <View style={{ flex: 1, flexDirection: 'row' }}>
                        <Image style={{ width: 40, height: 40 }} source={require(item.imgurl)} />
                        <View>
                            <Text>{item.itemname}</Text>
                            <Text>{item.desc}</Text>
                            <Text>{item.quantity}</Text>
                        </View>
                    </View>
                </View>
          </TouchableOpacity>
     );
}


render() {
    return (
        <FlatList
            data={this.state.data}
            renderItem={({ item, index }) => {
                return this.makeContentItem(item) 
            }
        />
    )
}

您可以更改样式以达到您想要的效果。您也可以查看FlatList

我希望它会有所帮助

Answer 2

renderEditAndClose() {
    return(
      <View style={{flex:1, flexDirection: "row", justifyContent: "flex-end"}}>
        {this.renderEditImage()}
        {this.renderCloseImage()}
      </View>
    );
  }

  renderImageAndItemData(item: Object) {
    return(
      <View style={{flex:1, flexDirection:"row"}}>
        {this.renderItemImage()}
        {this.renderItemData(item)}
      </View>
    );
  }

  renderItemImage(width: number, height: number, url: string) {
    return (
      <Image style={{ width: width, height: height }} source={{uri: url}} />
    );
  }
  renderItemData(item: Object) {
    return(
      <View>
        <View style={{flex: 1, flexDirection: "row", justifyContent: "space-around"}}>
          <Text>{item.name}</Text>
          <Text>{item.quantity}</Text>
        </View>
        <Text>{item.description}</Text>
      </View>
    );
  }

  renderRow(item: Object) {
    return() {
        <View>
          {this.renderEditAndClose()}
          {this.renderImageAndItemData(item)}
        </View>
    }
  }
  render() {
      return (
        <FlatList data={ee}
                  renderItem={(item) => this.renderRow(item)} />
      );
  }

反应原生自定义视图

2 个答案: