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

Question

有点麻烦。我应该首先说我对原生反应很陌生，所以希望这不是我错过的愚蠢行为。我正在使用 firebase 来存储图像 uri，但是当我尝试从我的函数中将它们传递给 render 时，它给了我 {_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：GIBShttps://www.gstatic.com/webp/gallery/2.jpg

Answer 1

您遇到这个问题是因为 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>
        );
    }
}