从异步函数获取图像uri

Question

有点麻烦。我应该首先说我真的很反应原生，所以希望这不是我错过的愚蠢。我正在使用firebase来存储图像uri，但是当我尝试从我的函数中传递它们时它会给我{_40：0，_65：0，_55：null，_72：null}输出但是在函数中，它似乎让uri很好，所以它似乎是传回它的东西。

我已经尝试过使用AsyncImage（使用sunglass dog示例：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（）返回一个promise而不是一个字符串。

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