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

Question

我是 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}
  )

Answer 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

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

How to display base64 images from array in React Native

arrays

reactjs

image

base64

native