react-native - 道具类型失败:提供给“ForwardRef(图像)”的道具“来源”无效
问题描述
我试图通过将图像路径作为道具发送到应该呈现它的组件来显示一个简单的 .jpg 图像。在下面的方式。
应用程序.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(图像)'的无效道具'来源'”
解决方案
此代码为我工作以获取图像
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>
)
}
}
推荐阅读
- javascript - ... react.js 16 中的道具
- excel - 将数据移动到目标工作表并格式化输出
- spring-data - Spring Data - 转换列表
>> 未来 - >>
- c - 在 C 中获取屏幕分辨率,不带“windows.h”
- angularjs - 如何在angularjs中使用ui-router管理多个状态
- wcf - wcf 服务长时间转换服务器客户端
- php - Laravel 通知类正在通过 Class 'App\Http\Controllers
- sql - 批量插入但主键为空
- javascript - 如何在字符串中查找特殊字符并将其存储在javascript中的数组中
- android - 前台服务不在 Oreo 中运行