Как отобразить изображения base64 из массива в React Native - PullRequest
Новая
       14

Как отобразить изображения base64 из массива в React Native

0 голосов
/ 09 февраля 2019

Я довольно новичок в реагировании на родную систему и работаю над приложением, которое обменивается данными между двумя пользователями с помощью socket.io

Пользователь 1 отправляет изображение пользователю 2, которое должно отображаться на экране пользователя 2: новый контейнер создается на экране каждый раз, когда пользователь 1 отправляет изображение, но внутри ничего нет ...

Я использую формат base64 для хранения каждого нового изображения в массиве newPictures [].

Вот код пользователя 2. Я получаю строку base64 в console.log (newPictures), поэтому все остальное работает, кроме визуализации изображения.

Спасибо за вашу помощь!

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

1 Ответ

0 голосов
/ 09 февраля 2019

Вы хотите использовать обратные галочки для этого, а не одинарные кавычки.Обратный тик является разделителем в 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

...