如何在 React Native 中显示数组中的 base64 图像答案

【问题标题】：How to display base64 images from array in React Native如何在 React Native 中显示数组中的 base64 图像
【发布时间】：2023-04-01 01:31:01
【问题描述】：

我是 react-native 的新手，我正在开发一个使用 socket.io 在两个用户之间进行通信的应用程序

用户 1 向用户 2 发送图片，该图片应显示在用户 2 屏幕上：每次用户 1 发送图片但内部没有任何内容时，屏幕上都会创建一个新容器...

我使用base64格式将每个newPicture存储在数组newPictures[]中。

这是用户 2 的代码。我在 console.log(newPictures) 上收到 base64 字符串，所以其他一切似乎都在工作，除了图片的渲染。

感谢您的帮助！

export default class DashboardArtificial extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newPicture: "",
      newPictures: []
    };
   }

componentDidMount() {
this.socket.on("new picture", newP => {
  this.setState({ newPictures: [...this.state.newPictures, newP] });
  setTimeout(() => {
    this.setState({
      curTime: new Date().toLocaleString()
    })
  }, 1000);
});
}

render() {
 const newPictures = this.state.newPictures.map(newPicture => {
   console.log(newPicture);
    return (
     <Image
       style={styles.arrayPictures}
       key={newPicture}
       source={{uri: 'data:image/png;base64,{newPicture}'}}
      />
    )
  });

return (
  {newPictures}
  )

【问题讨论】：

标签： arrays reactjs image base64 native

【解决方案1】：

您想使用反引号来执行此操作，而不是单引号。反引号是 ES6 中模板文字的分隔符，模板文字可以包含作为函数传递的 {newPicture} 等占位符。

 <Image
   style={styles.arrayPictures}
   key={newPicture}
   source={{uri: `data:image/png;base64,${newPicture}`}}
  />

如果您想了解有关反勾号的更多信息，可以在此处进行： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

【讨论】：