Как вызвать изображение из JSON с локальным путем в React Native - PullRequest
Новая
       10

Как вызвать изображение из JSON с локальным путем в React Native

0 голосов
/ 10 мая 2018 
import React, { Component } from 'react';
import {
ScrollView,
StyleSheet,
} from 'react-native';
import axios from 'axios';
import CarDetail from '../components/CarDetail';

class CarList extends Component {
state = { cars: [] };

componentDidMount() {
axios.get('https://www.website.com/ajx/home_ajx/lister')
.then(response => this.setState({ cars: response.data.data[0]['S1'] 
}));

//Add an if statement here to notify the user when the request fails
}

renderCars() {
return this.state.cars.map(model => 
  <CarDetail key={model.title} modelprop={model} /> 
);
}

render() {
console.log(this.state);

return (
  <ScrollView>
    {this.renderCars()}
  </ScrollView>
);
}  
}

export default CarList;

И путь к изображению в файле JSON выглядит следующим образом:

«изображение»: «data / models / peugeot-2008-138twf_600X400_.jpg»,

Ниже я называю изображение в другом компоненте 

const CarDetail = ({ modelprop }) => {
const { image } = modelprop;
return (
<Card>
<CardSection>
<View>
  <Image style={imageStyle} 
  source={{ uri: props.modelprop.image }} 
  />
</View>

Я считаю, что мне нужно использовать какой-то префикс, возможно, в моем Global.js, который я не смог найти или выяснить.

Любая помощь высоко ценится.

1 Ответ

0 голосов
/ 10 мая 2018

Как правило, ваш код содержит ошибку: 

const CarDetail = ({ modelprop }) => {
  const { image } = modelprop;
  return (
    <View>
      <Image
       style={imageStyle} 
       source={{ uri: image }} 
      />
    </View>
  );
}

Если image является чем-то вроде data/models/peugeot-2008-138twf_600X400_.jpg, вы должны использовать `$ {Global.imageUrlPrefix} $ {image}` для объединения всех.

...