Изображения не отображаются из состояния в реагировать родной - PullRequest
Новая
       7

Изображения не отображаются из состояния в реагировать родной

0 голосов
/ 28 января 2020

Я сохранил имена изображений в состоянии, но когда я пытаюсь показать их, выдается ошибка «Требуется неверный вызов ('./ assets /' + this.state.img1)» (но когда я помещаю имя изображения непосредственно в источник, он начинает работать. Например: у меня также есть предупреждение о том, что у него такое же имя изображения. 

  render() {
  return (
  <TouchableOpacity onPress={this.onItemPressed} style={styles.container}>

       <Image
        style={styles.stretch}
        source={require('./assets/'+this.state.img1)}
      />
       <Image
        style={styles.stretch}
        source={require('./assets/'+this.state.img2)}
      />
    </TouchableOpacity>
  )
}

1 Ответ

2 голосов
/ 28 января 2020

Согласно документации : In order for this to work, the image name in require has to be known statically.

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;

Что вы можете сделать, это построить отображение / объект: 

const myImages = {
  img1: require('/path/to/img1'),
  img2: require('/path/to/img2'),
};

render() {
  return (
  <TouchableOpacity onPress={this.onItemPressed} style={styles.container}>

       <Image
        style={styles.stretch}
        source={myImages[this.state.img1]}
      />
       <Image
        style={styles.stretch}
        source={myImages[this.state.img2]}
      />
    </TouchableOpacity>
  )
}

Чтобы это работало , this.state.img1 и this.state.img2 должны быть ключом в объекте myImages.

...