从JSON渲染图像作为base64与其他数据一起存储在React-Native中

Question

我有一个JSON文件，我的应用程序从api中检索了

它包含名称位置和其他信息，以及采用base64编码的图像

[ { meta: { views: 0, tapped: 0, favs: 0, priority: 0 },
    img: { data: [Binary] },
    special: true,
    _id: 5cace9fbeb520a4d8833bc1b,
    date: 2019-04-09T00:00:00.000Z,
    title: 'Test',
    url: 'http://goole.com',
    body: 'Oh it chaned',
    published: false,
    category: 'Sports',
    location: 'dafasfasf',
    __v: 0,
    publishDate: 2019-04-09T18:30:00.000Z,
    subCategory: 'Footabll' },
  { meta: { views: 0, tapped: 0, favs: 0, priority: 0 },
    img: { data: [Binary] },
    special: true,
    _id: 5cacf8e54b578827e8425c83,
    date: 2019-04-02T00:00:00.000Z,
    title: 'Testasd',
    url: 'http://google.com',
    body: 'wadwadwad',
    published: false,
    category: 'Sports',
    location: 'Random',
    subCategory: 'Footabll',
    __v: 0,
    publishDate: 2019-04-09T18:30:00.000Z },

看起来像这样

我无法在本机反应中渲染图像

我正在获取对象无效，因为使用键的React Child找到了对象{data} 我知道这是一个对象，因此会发生此错误，但我无法为此找到解决方案（它告诉我在想访问特定密钥时反复考虑每个密钥）。

这是我在render内部调用的函数

viewfunc(){



return(
  this.state.dataSource.map((item)=>{

    return(

    < View key={Math.random()} style={styles.slide3}>

      <Text style={styles.text}>{item.title}</Text>
      <Image
      style={{
        width: 51,
        height: 51,
        resizeMode: 'contain',
      }}
      source={{
        uri:
          'data:image/png;base64,${item.img.data}',
      }}
    />
      <Text style={styles.body}>{item.body}</Text>

    </View>)

}
))}
))}

我无法呈现此img，并且如果我尝试通过在文本字段中放置{item.img.data}来打印base64，则返回的对象无效。 我可以使用{item.meta.views}访问meta 请我需要帮助！

编辑

这是将图像推送到数据库时如何对其进行编码的方式

var newImg = fs.readFileSync(req.file.path);
var encImg = newImg.toString('base64');

也尝试过

  <Image
        style={{
          width: 51,
          height: 51,

        }}
        source={{
          uri:
            `data:image/png;base64,`+item.img.data,
        }}
      />

仍然无法渲染。

Answer 1

对反引号使用字符串插值：

import React from 'react';
import {Button, StyleSheet, PanResponder, View, Animated} from 'react-native';

export default class Scene extends React.Component {
    constructor(props) {
        super(props)

        const rectanglePosition = new Animated.ValueXY({ x: 0, y: 0 })
        const rectanglePanResponder = this.createPanResponder();

        this.state = {
            rectanglePosition,
            rectanglePanResponder
        }
    }

    createPanResponder = () => {
        return PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            onPanResponderMove: (event, gesture) => {
                this.state.rectanglePosition.setValue({ x: gesture.dx, y: gesture.dy });
            },
            onPanResponderRelease: () => {
                this.state.rectanglePosition.flattenOffset();
            },
            onPanResponderGrant: () => {
                this.state.rectanglePosition.setOffset({
                    x: this.state.rectanglePosition.x._value,
                    y: this.state.rectanglePosition.y._value
                });
            }
        });
    }

    resetPosition = () => {
        const newPosition = new Animated.ValueXY({ x: 0, y: 0 })

        this.setState({ rectanglePosition: newPosition }) // I thought updating the state triggered a re-render
        this.forceUpdate() // doesn't work either
    }

    getRectanglePositionStyles = () => {
        return {
            top: this.state.rectanglePosition.y._value,
            left: this.state.rectanglePosition.x._value,
            transform: this.state.rectanglePosition.getTranslateTransform()
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <Animated.View 
                    style={[styles.rectangle, this.getRectanglePositionStyles()]}
                    {...this.state.rectanglePanResponder.panHandlers}>
                </Animated.View>

                <View style={styles.footer}>
                    <Button title="Reset" onPress={this.resetPosition}></Button>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        borderColor: 'red',
        backgroundColor: '#F5FCFF',
    },
    footer: {
        borderWidth: 1,
        width: '100%',
        position: 'absolute',
        bottom: 0,
        left: 0,
        backgroundColor: 'blue',
    },
    rectangle: {
        position: 'absolute',
        height: 50,
        width: 50,
        backgroundColor: 'red'
    }
});

Answer 2

尝试类似

     <Image source={ uri: `data:${image.mime};base64,` + image.data, width: image.width, height: image.height }
/>