React-Native Image提供给Image的无效prop'ource'

时间:2018-05-14 15:42:43

标签: reactjs react-native

我认为这是一个非常烦人的错误,感觉没有解决方案,但我想分享并询问..我从服务器获取数据,我从那里获取图像源,并在移动设备中使用相同的图像路径 - 原生App。

我从服务器获取数据,如下所示:

$id = $request->userid;
$items = DB::table('item_user')->where('user_id', $id)->latest()->get();

$new = new Collection();

foreach($items as $item){

$new[] = array(
   ... ,
   'picturePath' => 'require'."('./". $item->picturePath ."')"
);

}

return $new;

在前端我尝试渲染,我在本地拥有这些图像。所以当我在本地使用它时:

  

要求(” ./图像/...')

它有效..但是这样它不起作用:

_renderItem = ({item}) => {

        return(
            <View>
               <Image source={ item.picturePath } style={{width: 15, height: 15}}/>
            </View>
        );

    };


    render(){
        return(

        <View>
           <FlatList
                data={this.state.items}
                renderItem={this._renderItem}
                keyExtractor={this._keyExtractor}
            />
         </View>
        );
    }

我得到error,我怎么能解决这个问题:

  

警告:道具类型失败:提供给“图片”的道具'源'无效。

2 个答案:

答案 0 :(得分:5)

这不是推荐的动态图像分配方式,因为在编译捆绑包之前,React Native必须知道所有图像源。

根据文档,这是一个如何动态加载图像的例子:

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;

https://facebook.github.io/react-native/docs/images.html

希望有所帮助

编辑: 如果你知道所有可以加载的图像,你可以尝试这样的事情:

// Create a file containing the references for your images

// images.js
const images = {
  logo: {
    uri: require('your-image-path/logo.png')
  },
  banner: { 
    uri: require('your-image-path/banner.png')
  }
}

export { images }; 


//YourComponent.js
import { images } from 'yourImagesPath';

// for this test, expected to return [ { name: logo }, { name: banner} ]
const imagesFromTheServer = (your fetch);

imagesFromTheServer.map(image => {
  if (!images[image]) {
    return <Text>Image not found</Text>;
  }
  return <Image source={images[image].uri} />; // if image = logo, it will return images[logo] containing the require path as `uri` key
});

这非常hacky但可能有用。

如果有帮助,请告诉我

答案 1 :(得分:1)

  

作为React Native Documentation says,需要在编译包之前先加载所有图像源。

在React Native中添加一个简单的图像应该是这样的:

<Image source={require('./path_to_your_image.png')} />

假设您有这个:

const slides = {
  car: './car.png',
  phone: '../phone.png',
}

然后,您将slides作为参数传递,但是仍然不能像这样使用它(即使在逻辑上应该可以使用):

<Image source={require(props.car)} />

require()内使用sildes{}

const slides = {
  car: require('./car.png'),
  phone: require('../phone.png'),
}

并像这样使用它:

<Image source={props.car}></Image>