Question

长话短说;
我从API获得团队ID。当我得到我的团队ID时，我想向我的服务器发出一个get-request请求，该查询从数据库中获取base64，然后在我得到字符串时显示它。

目前我正在使用一个函数来获取图像：

getLogo(teamid) {
  axios.get('url' + teamid)
    .then(res => return res.data);
}

这就是我的功能，这是我的图像组件。

<Image
  source={{ uri: `data:image/png;base64,${this.getLogo(this.homeid)}`}}
  style={{ height: 50, width: 50 }}
/>

这是错的吗？我应该采用不同的方法吗？我知道我从端点获取的base64是正确的，因为我尝试了console.log结果并将其插入到任何图像元素中并且它可以工作。

提前致谢！

Answer 1

您的getLogo函数是异步的，这意味着它不会直接返回图像的base64字符串 - 而只是触发HTTP请求并退出，并且您的then处理程序完成数据进入时的响应承诺。您最好的选择是更新该组件的状态，并在您的视图中引用它。

因此，您的HTTP调用将变为：

getLogo() {
  axios.get('url' + this.homeid)
    .then(res => this.setState({logo: res.data}));
}

（注意我已经删除了要在teamid中传递的参数，因为看起来你在组件上使用了一个设置变量this.homeid来驱动它）

然后您可以将徽标渲染移动到它自己的功能：

renderLogo() {
  let logoImage = null;
  if (this.state.logo) {
    logoImage = (
      <Image
        source={{ uri: `data:image/png;base64,${this.state.logo}`}}
        style={{ height: 50, width: 50 }}
      />
    );
  }
  return logoImage;
}

然后，您可以在{this.renderLogo}中显示徽标的任何地方引用render - 这样做意味着它不会显示任何内容，因为它会在HTTP调用返回之前返回null，此时它将更新状态，触发重新渲染，并显示徽标。如果要表明徽标正在加载，您还可以使用某种微调器或其他视图而不是null。

您需要在某个时刻调用getLogo来启动HTTP请求 - 一般来说，最好不要在渲染循环中对数据进行额外的请求。

如果这是徽标数组的一部分，并且您需要为不同的团队ID多次调用它（这可能是您接受teamid作为参数的原因？），或者确实如果您计划在徽标中添加任何其他复杂性或逻辑，我强烈建议将其移入自己的TeamLogo组件，可以将id作为prop传递，在组件初始化中进行HTTP调用，然后渲染base64相应地根据上述状态更新图像。

希望有所帮助，任何进一步的问题只需发表评论！

如何显示base64图像 - React Native

1 个答案: