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

Question

我对反应很陌生，我有一个用例，比如在 API 响应中获取书籍详细信息和图像。我需要迭代响应，我需要显示图像。

按照建议下面是我为此使用的代码。但是不显示图像。任何建议，将不胜感激。我做错了什么？

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

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

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

How to display binary data as image in react-native

react-native

axios

react-native-android