从异步函数获取图像 uri 进行渲染

Question

有点麻烦。我应该首先说我对原生反应真的很陌生，所以希望这不是我错过的愚蠢的事情。我正在使用 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);
  });
}

输出：

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

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

Answer 1

你遇到这个问题是因为 get_firebaseImgTest() returns 一个承诺，而不是一个字符串。

此问题的一个解决方案是将图像 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>
        );
    }
}

从异步函数获取图像 uri 进行渲染

Getting an Image uri into render from an async Function

render

async-await

firebase

react-native

firebase-realtime-database