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（）返回一个Promise，而不是字符串。

此问题的一种解决方案是将图像URI存储在组件的状态，然后通过componentDidMount回调对其进行更新，如下所示：

KMeans

从异步函数获取Image URI进行渲染

1 个答案: