时间戳

首页 > 解决方案 > React native：在路径数组上使用地图显示图像不起作用

javascript - React native：在路径数组上使用地图显示图像不起作用

问题描述

我是 react native 的初学者，我正在尝试显示一组路径的前三张照片。

import React from 'react';
import { View, Image, StyleSheet, FlatList, Dimensions, Text } from 'react-native';
import ToolBar from '../components/blocs/ToolBar'
import HeaderBlock from '../components/blocs/Header'

let pictures = require('../assets/pictures.json');
let { width: screenWidth } = Dimensions.get('window')

interface State { // Added this interface for props
    My_photo: []
}
export class Photos extends React.Component<{}, State>{
    constructor(props) {
        super(props);
        this.state = {
            My_photo: []
        }
    }
    GetFirstPicture(Pictures) {
        let tab = []
        for (let i = 0; i < Pictures.length; i++) {
            if (i < 3) {
                tab.push(Pictures[i].path)
            }
            else { break; }
        }
        return tab
    }

    UNSAFE_componentWillMount() {
        let tab
        tab = this.GetFirstPicture(pictures[0])

        this.setState({
            My_photo: tab
        })
    }

    render() {
        const { My_photo } = this.state
        return (
            <View>
                <HeaderBlock />
                <Text style={styles.title}>Mes photos</Text>
                {console.log(My_photo)}
                <View style={styles.photo_container}>
                    {My_photo.map((picturePath) => {
                        <Image source={{ uri: picturePath }} style={{
                            height: screenWidth / 3,
                            width: screenWidth / 3,
                        }} />
                    })}
                </View>
                <Text style={styles.title2}>Photos partagées avec moi</Text>
            </View>
        );
    }

}

export default Photos;

这是我的图片.json 文件：

[
    [
        {
            "id": 0,
            "owner": "Jeremy",
            "path": "https://pixnio.com/free-images/2017/03/07/2017-03-07-09-18-21.jpg"
        },
        {
            "id": 1,
            "owner": "Basile",
            "path": "https://pixnio.com/free-images/2017/08/30/2017-08-30-07-06-43-1000x666.jpg"
        },
        {
            "id": 2,
            "owner": "Deb",
            "path": "https://img.fotocommunity.com/paysage-dautomne-c3f5aa2f-5592-44ed-9d00-e3a6b96a6b58.jpg?height=1080"
        },
        {
            "id": 3,
            "owner": "Basile",
            "path": "https://pixnio.com/free-images/2017/08/30/2017-08-30-07-06-43-1000x666.jpg"
        },
        {
            "id": 4,
            "owner": "Jeremy",
            "path": "https://pixnio.com/free-images/2017/03/07/2017-03-07-09-18-21.jpg"
        }
    ],
    [
        {
            "id": 0,
            "owner": "Jeremy",
            "path": "https://pixnio.com/free-images/2017/03/07/2017-03-07-09-18-21.jpg"
        },
        {
            "id": 1,
            "owner": "Basile",
            "path": "https://pixnio.com/free-images/2017/08/30/2017-08-30-07-06-43-1000x666.jpg"
        },
        {
            "id": 2,
            "owner": "Deb",
            "path": "https://img.fotocommunity.com/paysage-dautomne-c3f5aa2f-5592-44ed-9d00-e3a6b96a6b58.jpg?height=1080"
        }
    ]

]

问题是，My_photo 上的地图功能没有按应有的方式显示图像。

请问有什么想法吗？

谢谢

PS：如果您知道如何更换折旧的组件，我也会接受：D

标签： javascript

解决方案

您的 map 函数有一个错误并且没有返回任何值，使用箭头符号您应该删除花括号或添加一个返回。

任何一个：

{My_photo.map((picturePath) => (
    <Image 
        source={{ uri: picturePath }} 
        style={{
            height: screenWidth / 3,
            width: screenWidth / 3,
        }} 
    />
))}

或者：

{My_photo.map((picturePath) => {
    return (
        <Image 
            source={{ uri: picturePath }} 
            style={{
                height: screenWidth / 3,
                width: screenWidth / 3,
            }} 
        />
    );  
})}

推荐阅读