REACT NATIVE：如何获取 API 数据 (JSON) 并插入到 Flatlist、API Image

Question

大家好，我从 https:list of all breeds, and inserted already into FlatList 得到API data，现在我想insert their picture from ： 这里附上what i did already的截图：

useEffect(() => {

            
  [2]: https://i.stack.imgur.com/6e7IW.jpg

Answer 1

我无法真正测试下面的内容，因为我不知道您的 collapse 组件来自哪里，但这是我认为的工作流程：

const [breedImage, setBreedImage] = useState();

useEffect(() => {
  fetch('https://dog.ceo/api/breeds/list/all')
    .then((response) => response.json())
    .then((json) => setData(Object.keys(json.message)))
    .catch((error) => console.error(error))
    .finally(() => setLoading(false));
}, []);

const getImage = breedId => {
  // Do you call to get the image
  return fetch(...)
  .then(result => {
    // ...Do your things
    // Set your image in a local state
    setBreedImage(result);
  });
}

return (
  <View style={styles.container}>
  {isLoading ? <ActivityIndicator/> : (
      <FlatList
        data={data}
        keyExtractor={({ id }, index) => index.toString()}
        renderItem={({ item }) => (

          <Pressable onPress={() => getImage(breedId)}>
          <Collapse>
          {breedImage &&
            (
              <CollapseHeader>
                <Card title="Local Modules">
                  <Text>{item} </Text>
                </Card>
              </CollapseHeader>

              <CollapseBody style={{alignItems:'center',justifyContent:'center',padding:10}}>
                <Card title="Local Modules">
                <Image
                    style={styles.tinyLogo}
                    source={{ 
                      uri: breedImage,
                    }}
                  />
                </Card>
              </CollapseBody>
            )}
          </Collapse>
          </Pressable>
        )}
      />
    )}
  </View>
  
);

这个想法是当您单击一个品种时触发另一个 api 调用（请参阅可能是 TouchableOpacity 或其他东西的<pressable ... />），当它被加载时，您可以显示图像。

现在，请注意，这取决于折叠组件的行为方式。如果你触发了一个渲染，collpase 可能会自行关闭，所以你需要用你的代码对其进行测试。

此外，您可以通过在 getImage 运行时显示加载程序来改进这一点。例如，如果 api 调用太长，则实现第二个加载器。