道具类型失败：提供给“ForwardRef（图像）”的道具“来源”无效答案

【问题标题】：Failed prop type: invalid prop 'source' supplied to 'ForwardRef(image)'道具类型失败：提供给“ForwardRef（图像）”的道具“来源”无效
【发布时间】：2019-01-27 13:43:30
【问题描述】：

我试图通过将图像路径作为道具发送到应该呈现它的组件来显示一个简单的 .jpg 图像。如下方式。

App.js

import React, { Component } from 'react';
import { View, Text, Image } from 'react-native';
import  Header from './components/Header';
import ImageSlider from './components/ImageSlider';
import ImageShow from './components/ImageShow';

class App extends Component {
    render () {
        return (
            <View style={{flex:1}}>
                <Header headerText = "HONEST REVIEWS" />
                <ImageSlider  />
                <ImageShow   imagePath = "./abc.jpg"/>
                <ImageShow   imagePath = "./abc.png" />

            </View>
        );
    }
}

export default App;

ImageShow.js

import React from 'react';
import { View, Image, Dimensions } from 'react-native';


const widthOfScreen = Dimensions.get('window').width;

const ImageShow = (imageProps) => {

    return (
        <View>
            <Image  style = { {width: 50, height: 50} } source = { {uri: imageProps.imagePath} } /> 
        </View>

    );

};

const styles = {
    ImageStyle : {
        height: 30,
        width: widthOfScreen
    }
}

export default ImageShow;

ImageSlider.js

import React from 'react';
import Carousel from 'react-native-banner-carousel';
import { StyleSheet, Image, View, Dimensions } from 'react-native';

const BannerWidth = Dimensions.get('window').width;
const BannerHeight = 250;

const images = [
    require('./abc.jpg'),
    require('./abc.jpg'),
    require('./abc.jpg')
];

export default class ImageSlider extends React.Component {
    renderPage(image, index) {
        return (
            <View key={index}>
                <Image style={styles.imagesInSlider} source = { image } /> 
            </View>
        ); 
    }

    render() {
        return (
            <View style={styles.container}>
                <Carousel
                    autoplay
                    autoplayTimeout={2000}
                    loop
                    index={0}
                    pageSize={BannerWidth}
                >
                    {images.map((image, index) => this.renderPage(image, index))}
                </Carousel>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        justifyContent: 'flex-start',
        alignItems: 'center'

    },
    imagesInSlider: {
        width: BannerWidth,
        height: 250,
        resizeMode: 'stretch',
    }
});

我的文件夹结构是：

ProjectName
------src
--------components
-----------ImageShow.js
-----------ImageSlider.js
-----------Header.js
-----------abc.jpg
--------App.js

理想情况下，当我传递本地存储的图像路径时，应该显示图像，但我没有显示任何图像，而是显示一条警告消息： “失败的道具类型：提供给'ForwardRef（图像）'的无效道具'source'”

【问题讨论】：

使用{uri: imageProps.imagePath }
它对我不起作用。我已经编辑并粘贴了上面的完整代码sn-p，看一次，它说“找不到图像”，但即使我更改了ImagePath，仍然有一些样式问题阻止我显示图像.

标签： react-native react-native-image

【解决方案1】：

这段代码对我有用获取图像

import image1 from '../assets/images/abc.png'
import image2 from '../assets/images/abc.png'

const images = [
{
    name: image1
},
{
    name: image2
}]

const RenderPage = ({ image }) => {
 return (
    <Image resizeMode="contain" style={{ width: 50, height: 100, marginBottom: 5 }} source={image} />
 )
}

class myclass extends Component {
 render() {

    return (

        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            {images.map((image, index) =>
                <RenderPage key={index} image={image.name} />
            )}
        </View>

    )
 }
}

截图如下：

【讨论】：