React-Native 嵌套 Flatlist

Question

我正在尝试使用此人可能拥有的图像显示厨师的个人资料。 我有一组厨师，其中包含一些信息，例如姓名和个人资料图片。 Cooks 数组还包含一个图片数组。 我想显示cook.profile 图片名称，然后显示链接到他们个人资料的照片列表。 我可以显示姓名和个人资料图片，但我不确定如何在每个厨师的姓名下显示一系列图片（水平滚动）。 这是厨师数组：

cooks = [{
        "id": "1001",
        "firstName": "Mike",
        "profilePic": "Portrait.jpg",
        "photos": [{
                "url": "img.jpg"
            },
            {
                "url": "img2.jpg"
            },
            {
                "url": "img3.jpg"
            },
            {
                "url": "img4.jpg"
            }
        ]
    },
    {
        "id": "1002",
        "firstName": "Marla",
        "profilePic": "profilePic.jpg",
        "photos": [{
                "url": "img1.jpg"
            },
            {
                "url": "img2.jpeg"
            },
            {
                "favorite": "true",
                "url": "img3.jpg"
            },
            {
                "url": "img4.jpeg"
            }
        ]
    }
]

================================================== ================

    <FlatList
        data={this.props.cooks}
        renderItem={({ item }) => (
          <View>
            <TouchableOpacity >
            <CardSection>
              <View style={thumbnailContainerStyle}>
                <Image
                  style={thumbnailStyle}
                  source={{ uri: item.profilePic }}
                />
                </View>
                <View style={headerContentStyle}>
                  <Text style={headerTextStyle}>{item.firstName}</Text>
                </View>
          </CardSection>
          </TouchableOpacity>
          {/*
            following part is not working as expected.
          */}
          <FlatList
              data={item.photos}
              renderItem={({ item2 }) =>
              <View>
                <Image
                  style={imageStyle}
                  source={{ uri: item2.url }}
                />
              </View>
            }
            keyExtractor={(item2, index) => index}
          />
          </View>
        )}
        keyExtractor={(item, index) => index}
      />

================================================== ==========

const styles = {
  iconStyle: {
      paddingLeft: 10,
      justifyContent: 'center',
      alignItems: 'center',
      height: 23,
      width: 25
  },
  containerStyle: {
    flexDirection: 'row',
    flex: 1
  },
  inputStyle: {
    paddingLeft: 10,
    fontSize: 30,
    height: 30,
    width: 350
  },
  headerContentStyle: {
    flexDirection: 'column',
    paddingTop: 20
  },
  headerTextStyle: {
    fontSize: 25
  },
  thumbnailStyle: {
    borderRadius: 15,
    height: 100,
    width: 100
  },
  thumbnailContainerStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10
  },
  imageStyle: {
    height: 400,
    flex: 1,
    width: null
  }
};

Answer 1

您可以从“react-native”库中实现 SectionList 而不是使用嵌套的 FlatList。 它更容易和更好的解决方案。 你有所有的文档在这里。 希望这可以帮助你！

Answer 2

这是我在我的一个项目中创建的示例。 看看它可能对你有帮助

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: "",
      dummy: [
        {
          _id: "5e12905eb10fe53808d1ca55",
          name: "WHY NAME EXISTS -_-",
          stage: "Confirmed",
          feedback: {
            _id: "5e12905eb10fe53808d1ca56",
            rating: 1,
            review: "bad bad only bad."
          },

          itemDetails: [
            {
              _id: "5e12905eb10fe53808d1ca5a",
              nameXquantity: "Lehsun Adrak x100",
              individualTotal: 155
            },
            {
              _id: "5e12905eb10fe53808d1ca59",
              nameXquantity: "Lehsun x50",
              individualTotal: 25
            },
            {
              _id: "5e12905eb10fe53808d1ca58",
              nameXquantity: "Lehsun Adrak Dhaniya Shimla mirch x Infinity",
              individualTotal: 9969
            }
          ],

          __v: 0
        }
      ]
    };
  }


  render() {
    return (
      <SafeAreaView>
        <ScrollView>
          <FlatList
            data={this.state.dummy}
            renderItem={({ item }) => (
              <View>
                <Text>{item.name}</Text>
                <FlatList
                  data={item.itemDetails}
                  renderItem={({ item }) => <Text>{item.nameXquantity}</Text>}
                  keyExtractor={item => item._id}
                />
              </View>
            )}
            keyExtractor={item => item._id}
          />
        </ScrollView>
      </SafeAreaView>
    );
  }
}

export default Test;