React Native: изображение не отображается с динамическим / локальным URI - PullRequest
Новая
       50

React Native: изображение не отображается с динамическим / локальным URI

0 голосов
/ 08 ноября 2018

, поэтому я пытаюсь отобразить изображение с динамическим uri / path (при инициализации оно отображает изображение заполнителя, а затем изменяется) следующим образом: 

<Image source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

, где this.state.pickedImage инициализируется как null, а затем изменяется с помощью react-native-image-picker s launchCamera и launchImageLibrary, как показано ниже: 

cameraHandler = () => {
    ImagePicker.launchCamera({title: "Pick an Image", maxWidth: 800, maxHeight: 600}, res => {
        if (res.didCancel) {
            console.log("User cancelled!");
        } else if (res.error) {
            console.log("Error", res.error);
        } else {
            this.setState({
                pickedImage:  res.uri,
                imageSize: res.fileSize,
            });
        }
    });
}};

(Я должен отметить, что я реализовал launchImageLibrary в точно таким же образом, поэтому я не видел причины, чтобы поместить его здесь.)

и хотя изображение заполнителя отображается очень хорошо, всякий раз, когда я загружаю новое изображение, <Image/>, похоже, не отображается вообще, и у меня остается только фон.

Что я пробовал:

Я пытался сделать что-то вроде инициализации this.state.pickedImage в моем state, например: 

pickedImage: require('./Placeholder.jpeg').uri

и добавление тега изображения, например: 

<Image source={{uri: this.state.pickedImage}} />

но, увы, это просто мешает мне рендерить любые изображения.

Я думал о динамическом связывании путей к require() как здесь (а также ко многим местам на этом сайте), но, насколько я понимаю, вам нужно знать, какие потенциальные изображения вы могли бы хочу быть заранее, и если я использую камеру, я не могу этого сделать. (Кроме того, я не могу заранее настроить список и экспортировать каждое изображение на телефоне пользователя, поэтому мои руки связаны там.) (Очевидно, что действительно не существует способа динамического связывания с требованием ( ) как я ищу, , потому что менеджер пакетов не работает таким образом )

Можно ли как-нибудь отобразить эти uri с? Любая помощь приветствуется!

(я использую реагирующую версию 0.57.4)

Ответы [ 3 ]

0 голосов
/ 08 ноября 2018

Я думаю, что ваш res.uri не в порядке.

В моем проекте, где я загружаю изображения из галереи, у меня есть res.node.image.uri, например: 

 <Image style={styles.imageItem}
    source={{ uri: res.node.image.uri }}
 />
0 голосов
/ 09 ноября 2018

Оказывается, решение было довольно глупым, но все, что мне нужно было сделать, это установить ширину и высоту для тега, например: 

<Image style={{width:100,height:100}} source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

Я изначально пропустил это решение, потому что сделал что-то вроде: 

<Image style={{width:'100%',height:'100%'}} source={this.state.pickedImage == null? require('./Placeholder.jpeg'):{uri: this.state.pickedImage}}/>

и в то время это не работало, но теперь работает. Понятия не имею почему, но сейчас это работает. Если у кого-то есть идеи, почему, я был бы очень признателен, почему.

0 голосов
/ 08 ноября 2018

Какую «реагирующую-нативную» версию вы используете? Это не работает на всех платформах? require('./image.jpg') должно работать, возможно, что-то не так с вашим URI. Или попробуйте загрузить с Image.resolveAssetSource(source);

...