Как получить динамический образ URI, который не всегда определяется в React Native? - PullRequest
Новая
       34

Как получить динамический образ URI, который не всегда определяется в React Native?

0 голосов
/ 23 октября 2019

Я пытаюсь получить имя файла моего изображения из выборки в службу отдыха. Но React пытается запросить изображение до того, как у звонка появится имя файла, поэтому, конечно, он не может найти изображение и возвращает ошибку 500. Есть ли способ решить или обойти это?

Я пытаюсь получить имя файла от json, которое он возвращает из выборки.

Функция, в которой это должно происходить 

nextPerson = () => {
      var numberOfPersons = Object.keys(this.state.peopleList).length;

      if (this.state.personIndex < numberOfPersons) {
        person = this.state.peopleList[this.state.personIndex]
        this.setState({currentPerson:person});

        this.setState({image : require('../img/' + Object(this.state.currentPerson.gebruikerFoto).url)});

        this.state.personIndex++;
      }
    }

Визуализация моего компонента 

render() {
    var img = this.state.image;

      return (
        <View style={styles.container}>
          <Image style={styles.image} source={img} />

          <Text style={styles.persoonNaam}>{this.state.currentPerson.gebruikerNaam}</Text>
          <Text style={styles.persoonBio}>{this.state.currentPerson.biografie}</Text>
          <TouchableOpacity onPress={this.likePersoon}>
            <Text>Like</Text>
          </TouchableOpacity>
        </View>
      );
    }

Ответы [ 2 ]

0 голосов
/ 24 октября 2019

см. Этот пример: 

renderItem = ({item})=>{
    return(


            <TouchableOpacity onPress={ () => this._openViewPage(item.id, item.cat_id,this.state.token)} style={styles.boxContainer}>
                <View style={styles.BoxLeft}>
                       <H1>{item.title}</H1>
                       <H2 style={{flexWrap: 'wrap', textAlign: 'right',}}>{item.short_description}</H2>
                </View>
                <View style={styles.boxRight}>
                    <Image source={{uri: item.image}}  style={{width: 100, height: 100 }} />
                </View>
            </TouchableOpacity>


    )
     }

и в рендере вашего компонента вы можете использовать его: 

             <FlatList
                    data= {this.state.dataSource}
                    renderItem={this.renderItem} 
                    keyExtractor = { (item, index) => index.toString() }
                    style={{marginBottom:100}}

              />
0 голосов
/ 24 октября 2019

Вам нужно поддерживать ваш компонент в состоянии загрузки, визуализируя компонент shimmer (реагировать-нативно-мерцая) или просто используя ActivityIndicator из реагирующего натива, пока ваш вызов API не завершится. Когда данные станут доступны, вы можете отобразить компонент Image. 

render() {
if (!this.state.imageUri) return <ActivityIndicator />; // keep showing the loader until the api call is done. Update the state once the call is successful.

return (
 <Image /> // your image component
)
...