Получение изображения URI в рендере из асинхронной функции - PullRequest
Новая
       16

Получение изображения URI в рендере из асинхронной функции

1 голос
/ 01 мая 2019

возникли проблемы.Я должен начать с того, что я действительно новичок, чтобы реагировать на родных, так что, надеюсь, это не что-то глупое, что я пропустил.Я использую Firebase для хранения изображений URI, но когда я пытаюсь передать их в рендере из моей функции, это дает мне вывод {_40: 0, _65: 0, _55: null, _72: null}, но в функции, кажется,чтобы получить URI просто отлично, так что, кажется, что-то с передачей назад.

Я пытался использовать AsyncImage (на примере собачьего стекла: https://www.npmjs.com/package/react-native-async-image-animated), но он просто загружается вечно, я думаю, и результат рендеринга остается прежним. 


export class PinImgScreen extends React.Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: 'white',
        }}>
        {console.log(get_firebaseImgTest(targetinMem, 1))}

        <AsyncImage
          style={{
            borderRadius: 50,
            height: 100,
            width: 100,
          }}
          source={{
            uri: get_firebaseImgTest(targetinMem, 1),
          }}
          placeholderColor="#b3e5fc"
        />
      </View>
    );
  }
}



function get_firebaseImgTest(userId, num) {
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      firebase
        .database()
        .ref('Info1/' + userId + '/imgInfo' + num)
        .on('value', snapshot => {
          console.log('GIBS ' + snapshot.val().imgInfo);
          resolve(snapshot.val().imgInfo);
          reject('https://www.gstatic.com/webp/gallery/1.jpg');
        });
    }, 200);
  });
}

OutPut:

1: {_40: 0, _65: 0, _55: ноль, _72: ноль}

2: GIBS https://www.gstatic.com/webp/gallery/2.jpg

1 Ответ

0 голосов
/ 01 мая 2019

Вы получаете эту проблему, потому что get_firebaseImgTest () возвращает обещание, а не строку.

Одним из решений этой проблемы было бы сохранить URI изображения в состоянии компонента и обновить его с помощью обратного вызова componentDidMount, напримеритак: 

export class PinImgScreen extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            imageUri: 'https://www.gstatic.com/webp/gallery/1.jpg'
        }
    }

    componentDidMount() {
        get_firebaseImgTest(targetinMem, 1)
            .then(imageUri => this.setState({imageUri}))
            .catch(imageUri => this.setState({imageUri}))
    }

    render() {
        return (
            <View
                style={{
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: 'white',
                }}>
                {console.log(get_firebaseImgTest(targetinMem, 1))}

                <AsyncImage
                    style={{
                        borderRadius: 50,
                        height: 100,
                        width: 100,
                    }}
                    source={{
                        uri: this.state.imageUri
                    }}
                    placeholderColor="#b3e5fc"
                />
            </View>
        );
    }
}
...