Getting an Image uri into render from an async Function

问题

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.

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

OutPut:

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

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

回答1:

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

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

来源：https://stackoverflow.com/questions/55929760/getting-an-image-uri-into-render-from-an-async-function

标签

firebase

react-native

firebase-realtime-database

async-await

render