从异步函数获取图像uri

问题描述 投票:1回答:1

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

firebase react-native firebase-realtime-database async-await render
1个回答
0
投票

您遇到此问题是因为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>
        );
    }
}
© www.soinside.com 2019 - 2024. All rights reserved.