如何在 react-native 中将二进制数据显示为图像答案

【问题标题】：How to display binary data as image in react-native如何在 react-native 中将二进制数据显示为图像
【发布时间】：2020-08-03 19:53:23
【问题描述】：

我对反应很陌生，我有一个用例，比如在带有图像的 API 响应中获取书籍详细信息。我需要遍历响应并且需要显示图像。

正如displaying binary data as image 建议的那样，下面是我为此使用的代码。但图像不显示。任何建议，将不胜感激。我做错了什么？

<View>
                <FlatList data={books} renderItem={
                    data => {
                        console.log("data is -? " + books.author);
                        //const buffer = Buffer.from(data.item.image.data, 'binary').toString('base64');
                       /* let image = btoa(
                            new Uint8Array(data.item.image.data)
                                .reduce((d, byte) => d + String.fromCharCode(byte), '')
                        );*/

                        const encoded = data.item.image.data;
                        <View style={styles.imageContainer}>
                            <Image
                                source={{
                                   uri: `data:image/jpeg;base64,${encoded}`
                                } }
                                //source="{URL.createObjectUrl(encoded)}"
                                style={styles.stretch}
                            />
                        </View>
                    }
                } />
                </View>

【问题讨论】：

标签： react-native axios react-native-android

【解决方案1】：

在这里分享解决方案如何解决问题，希望这可能对某人有所帮助。只是分享工作代码。

<FlatList data={books} keyExtractor={(item, index) => item.id.title+index} 
renderItem={({ item }) =>
         <Item title={item} />
     } />


function Item({ title }) {
  let ed = 'data:image/png;base64,' + title.image.data;
 return (
<View>
                        <Image source={{ uri: ed }} /></View>
);
}

【讨论】：