Реактивная вставка исходного изображения и строк

Question

Реактивная вставка исходного изображения и строк

1

Я работаю с React Native и пытаюсь получить изображение, отображаемое на основе переменной заголовка, которая отличается от списка. Я не думаю, что правильно обрабатываю строки с помощью JavaScript, но не знаю, как это исправить. Какие-либо предложения? Он отлично работает, когда я просто жестко кодирую путь источника изображения, поэтому я знаю, что это правильно.

<View style={{ flex: 8 }}>
     this.setState({
         link: './assets/' + this.props.title + '.jpg',
     });
     <Image source={require(this.state.link)} style={[styles.images]} />
</View>

User 965 02 дек. 2017, в 23:34

Источник

0

Попробуйте использовать path.join('./assets/', this.props.title, '.jpg')
Ryan Walker 02 дек. 2017, в 22:39
0

Возможный дубликат переменной собственного использования для файла изображения
Rich Churcher 02 дек. 2017, в 23:19

Теги:

javascript

react-native

3 ответа

0

Откладывая вызов setState изнутри визуализации, который, вероятно, следует избегать, я думаю, что проблема здесь в том, что вы пытаетесь использовать переменную внутри вызова require. require вызовы разрешались во время сборки упаковщиком, поэтому им нужен статический ресурс (тот, который не зависит от значения переменной). Это довольно хороший обзор стратегий статического управления активами в React Native: https://willowtreeapps.com/ideas/react-native-tips-and-tricks-2-0-managing-static-assets-with-absolute-paths/

Rich Churcher 02 дек. 2017, в 22:10

0

Может быть, вы могли бы попробовать:

this.setState({link: './assets/${this.props.title}.jpg' });

Lucero Peñarrieta 02 дек. 2017, в 20:30

Ещё вопросы

Попробуйте использовать path.join('./assets/', this.props.title, '.jpg')
Возможный дубликат переменной собственного использования для файла изображения

Senthil Balaji · Accepted Answer · 2017-12-03T02-03-00.000Z

Вы даже не можете установить SetState внутри такого вида, и для инструкции require вы не можете поместить строку с конкатенацией с другой строкой set, всегда требуется, чтобы оператор был полностью жестко закодирован, как require("./assets/image.png"); и soln может быть следующим:

import {...} from '...';
    const titleImages = {
      title1: require("./assets/title1.png"),
      title2: require("./assets/title2.png") //here title1/title2 should be the value that you receive in props
    };
    class Anyclass extends Component {
      render() {
        const { title } = this.props;
        return (
          <View style={{ flex: 8 }}>
            <Image source={titleImages[title]} style={[styles.images]} />
          </View>
        );
      }
    }

если у вас несколько названий, вы можете просто объявить инструкцию titleImages объекте titleImages и можете отображать изображение.