React Native：尝试从 https://cataas.com api 获取图像时出现错误

Question

我收到 SyntaxError: Json Parse error: JSON Parse error: Unrecognized token '

我正在将https://cataas.com api 用于反应原生应用程序，我的任务是生成随机小猫图像列表。我尝试使用 fetch 方法，但我也得到错误 sorce.uri should not be an empty string。我该如何解决这个问题？

这是我的代码：

import React, { Component } from 'react';
import { 
  Image, 
  StyleSheet,
  Text, 
  View,
  FlatList 
} from 'react-native';

class App extends Component {
 state = {
      photos: '',
    }


componentDidMount() {
   fetch('https://cataas.com/cat?width=100')
     .then(res => res.json())
     .then(data => {
       this.setState({
           photos: data
         })
         .catch(err => {
           console.log('error', err);
           alert(err)
         })
     })
}


render() {
    console.log(this.state.photos)
    return (
      <View style={styles.container}>
        <Image 
          source={{url: this.state.photos}} 
          style={{height: 100, width: 100}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  }
});

export default App;

Answer 1

你的代码有错别字

将url 替换为uri，如docs 中所示

<Image 
   source={{uri: this.state.photos}} 
   style={{height: 100, width: 100}}
/>

Answer 2

你不必手动调用这个api，你可以直接使用Image组件中的链接：

<Image 
  source={{uri: "https://picsum.photos/100/100"}} 
  style={{height: 100, width: 100}}
/>

编辑：

好吧，这并不像我想象的那么容易！

我创建了第一个基本版本：https://snack.expo.io/@sanjar/so-53434400

与我的想法相反，它总是显示相同的图片。 这是因为 react-native 缓存系统看到相同的 url 并决定不再执行 http 请求。 然后我检查了文档，发现a way to fix this issue, but for ios only 我只需要改变：

source={{uri: "https://source.unsplash.com/random"}}

作者：

source={{uri: "https://source.unsplash.com/random", cache: 'reload'}}

应该可以在ios上运行（我现在没有mac），对于android我还不知道，我可能稍后再调查。