如何在 React Native 中显示数组中的 base64 图像
How to display base64 images from array in React Native
我是 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}
)
您想使用反引号来执行此操作,而不是单引号。反引号是 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 的新手,我正在开发一个使用 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}
)
您想使用反引号来执行此操作,而不是单引号。反引号是 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