React Native 检索 API 数据 source.uri 不应为空字符串

Question

我正在尝试从 API (https://developers.zomato.com/documentation) 中检索数据并获取餐馆的名称和图像。但是，当我尝试加载图像时，我收到警告 source.uri should not be an empty string.

这是我的代码：

async componentDidMount() {
    let id = this.props.navigation.state.params.category
    let result;
    try {
      result = await axios.request({
        method: 'get',
        url: `https://developers.zomato.com/api/v2.1/search?category=${id}`,
        headers: {
          'Content-Type': 'application/json',
          'user-key': "a31bd76da32396a27b6906bf0ca707a2",
        },
      })
    } catch (err) {
      err => console.log(err)
    }
    this.setState({
      isLoading: false,
      data: result.data.restaurants
    })
  }
render() {
    return (
      <View>
        {
          this.state.isLoading ?
            <View style={{ flex: 1, padding: 20 }}>
              <ActivityIndicator style={{color:'red'}} />
            </View> :
            (
              this.state.data.length == 0 ?
                <View style={{ flex: 1, padding: 20 }}>
                  <Text style={{ color: '#000', fontWeight: 'bold' }}>No restaurants from selected category</Text>
                </View> :
                <FlatList
                  style={{ marginBottom: 80 }}
                  keyExtractor={item => item.id}
                  data={this.state.data}
                  renderItem={({ item }) =>
                  <TouchableHighlight onPress={()=> console.log(item.restaurant.thumb)}>
         <Card image={item.restaurant.thumb} style={styles.container}>
            <Image resizeMode='contain' source={{ uri: item.restaurant.thumb }}/>
           <Text style={{color:'#000',fontWeight:'bold'}}>{item.restaurant.name} </Text>
         </Card>
         </TouchableHighlight>
                  }
                />
            )
        }
      </View>
    );
  }

如您所见，当我触摸任何卡片时，我正在控制台记录图像 uri 的 link，它完美显示。为什么当应用程序加载图像时它们是空字符串，但当我通过控制台日志加载它时 link 完美显示？

我正在使用 axios 加载我的 API

这里有一份世博会小吃link：https://snack.expo.io/r1XTaw4JU

Answer 1

所以我遇到了 2 个问题，一个是在卡片组件中，您没有正确提供 uri，它应该是 image={{uri:item.restaurant.thumb}}，其次，对于纽约，您的实体 ID 必须是

To search for 'Italian' restaurants in 'Manhattan, New York City', set cuisines = 55, entity_id = 94741 and entity_type = zone

根据 zomato 文档，请检查一下。并找到 expo link : expo-snack

import React from 'react';
import { 
    View,
    Text,
    FlatList,
    StyleSheet,
    Button,
    TouchableHighlight,
    ActivityIndicator,
    } from 'react-native';
import { createAppContainer } from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import { Card, Image } from 'react-native-elements';
import Constants from 'expo-constants';
import axios from 'axios';

export default class CategoryScreen extends React.Component {

  constructor(props){
    super(props);
        this.state={
      data : [],
      isVisible: true,
      city : '94741'
    }
  }
async componentDidMount() {
    let id = "3"
    let city = this.state.city
    let result;
    try {
      result = await axios.request({
        method: 'get',
        url: `https://developers.zomato.com/api/v2.1/search?entity_id=${city}&entity_type=zone&category=${id}`,
        headers: {
          'Content-Type': 'application/json',
          'user-key': "a31bd76da32396a27b6906bf0ca707a2",
        },
      })
    } catch (err) {
      err => console.log(err)
    }
    this.setState({
      isLoading: false,
      data: result.data.restaurants
    })
    console.log(result)
    console.log(data)
  }
render() {
    return (
      <View>
        {
          this.state.isLoading ?
            <View style={{ flex: 1, padding: 20 }}>
              <ActivityIndicator style={{color:'red'}} />
            </View> :
            (
              this.state.data.length == 0 ?
                <View style={{ flex: 1, padding: 20 }}>
                  <Text style={{ color: '#000', fontWeight: 'bold' }}>No restaurants from selected category</Text>
                </View> :
                <FlatList
                  style={{ marginBottom: 80 }}
                  keyExtractor={item => item.id}
                  data={this.state.data}
                  renderItem={({ item }) =>
                  <TouchableHighlight onPress={()=> alert(item.restaurant.location.city)}>
         <Card image={{uri:item.restaurant.thumb}} style={styles.container}>
           <Text style={{color:'#000',fontWeight:'bold'}}>{item.restaurant.name} </Text>
         </Card>
         </TouchableHighlight>
                  }
                />
            )
        }
      </View>
    );
  }

};

const styles = StyleSheet.create({

});

React Native 检索 API 数据 source.uri 不应为空字符串

React Native retrieving API data source.uri should not be an empty string

react-native

zomato-api

axios