从异步函数获取Image URI进行渲染 [英] Getting an Image uri into render from an async Function

问题描述

有点麻烦.我首先要说我真的对本土人起反应，所以希望这不是我错过的愚蠢之举.我正在使用Firebase存储图像uri，但是当我尝试通过函数从渲染器传递它们时，它会给我{_40:0，_65:0，_55:null，_72:null}输出，但是在函数中，它似乎使uri正常运行，因此似乎可以将其传回.

having a bit of trouble. I should start by saying I'm really new to react native so hopefully it's not something foolish I've missed. I'm using firebase to store image uri's but when I try to pass them in render from my function it gives me the {_40:0,_65:0,_55:null,_72:null} output but in the function, it seems to get the uri just fine so it seems to be something with passing it back.

我尝试使用AsyncImage(使用太阳镜狗示例:https://www.npmjs.com/package/react-native-async-image-animated )，但我认为它永远处于加载状态，并且渲染中的输出保持不变.

I've tried using AsyncImage (using the sunglass dog example: https://www.npmjs.com/package/react-native-async-image-animated ) but it just sits forever loading I think and output in render remains the same.

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);
  });
}

输出:

1:{_40:0，_65:0，_55:null，_72:null}

1: {_40:0,_65:0,_55:null,_72:null}

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

推荐答案

您会遇到此问题，因为get_firebaseImgTest()返回一个Promise，而不是字符串.

You are getting this issue because get_firebaseImgTest() returns a promise, not a string.

此问题的一种解决方案是将图像URI存储在组件的状态中，并通过componentDidMount回调对其进行更新，如下所示:

One solution to this issue would be to store the image URI in the component's state and update it through the componentDidMount callback like so:

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>
        );
    }
}

这篇关于从异步函数获取Image URI进行渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！