如何从 Assets 文件夹导入图像而不是通过 url 使用来自互联网的图像？
为什么图标不显示？
我正在研究 React Native，试图创建一个显示城市业务的小型应用程序。
我必须说我正在使用 "styled-components / native"对于样式，并将它们放在单独的文件中，因为您将看到组件未正确命名，但这工作正常。
我创建了一个对象，其中显示了每个业务的详细信息:
名称、地址、企业类型的图标、企业形象、了解企业是关闭还是开放的图像。
然后，我尝试在卡片中显示这些详细信息，并将其发送到应用程序的另一个页面，其中我通过 FlatList 添加了不同的业务。将被显示。
问题是我不知道如何从对象中的 Assets 文件夹添加图像，我不知道导入它们的正确方法，不知道将图像带到对象然后在对象中调用它们的确切语法卡片组件，例如:
image = require ('../../../../ assets / logos.jpg')
由于我找不到从 Assets 文件夹中导入图像的方法，因此我求助于从 Url 导入它们，然后使用 URI 调用它们。
但由于互联网连接或其他原因，图像无法在应用程序中正确显示。
图片。
photos = ["https://cdn.pixabay.com/photo/2015/09/09/19/56/office-932926_1280.jpg"],
<StoreCardCover
key = {name}
resizeMethod = 'scale'
source = {{uri: photos [0]}}
/>
icon = "https://img.icons8.com/material-two-tone/384/000000/espresso-cup--v2.png",
<Icon source = {{uri: icon}} />
icon = {image: require ('../../../../ assets / logos.jpg')},
photos = ["https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1125/posts/30546/preview_image/RN.jpg"],
ExceptionsManager.js: 180 Warning: Failed prop type: Invalid prop `source` supplied to` Image`.
at Image
console.error: JSON value '{
image = 1;
} 'of type NSMutableDictionary cannot be converted to NSString
reactConsoleErrorHandler
ExceptionsManager.js: 237: 33
overrideMethod
backend.js: 2139: 25
registerError
LogBox.js: 147: 8
errorImpl
LogBox.js: 58: 21
console.error
LogBox.js: 32: 13
logToConsole
RCTLog.js: 47: 4
logIfNoNativeHook
RCTLog.js: 30: 6
__callFunction
MessageQueue.js: 414: 26
__guard $ argument_0
MessageQueue.js: 113: 11
__guard
MessageQueue.js: 365: 8
我给你看文件让你判断我的错误
文件 StoreInfo.js
import React from 'react'
import { StyleSheet, Image } from 'react-native'
import { SvgXml } from 'react-native-svg'
import star from '../../../../assets/star'
import closed from '../../../../assets/closed'
import {
StoreCard,
StoreCardCover,
Title,
Address,
Info,
Rating,
Section,
SectionEnd,
Icon
} from './StoreInfoStyles'
export const StoreInfo = ({ store = {} }) => {
const {
name = "Online Company",
icon= {image: require('../../../../assets/logos.jpg')},
photos = ["https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1125/posts/30546/preview_image/RN.jpg"],
//icon = "https://img.icons8.com/material-two-tone/384/000000/espresso-cup--v2.png",
//photos = ["https://cdn.pixabay.com/photo/2015/09/09/19/56/office-932926_1280.jpg"],
address = "Charcos Enbarrados, 6 Ninguna Parte 04593",
rating = 4,
isClosed = true,
} = store
const ratingArray = Array.from(new Array(Math.floor(rating)))
return (
<StoreCard
elevation={5}
>
<StoreCardCover
key={name}
resizeMethod='scale'
source={{ uri: photos[0] }}
/>
<Info>
<Title> {name} </Title>
<Section>
<Rating
style={styles.rating}
>
{ratingArray.map(() => (
<SvgXml xml={star} width={30} height={30} />
))}
</Rating>
<SectionEnd>
{isClosed && <SvgXml xml={closed} width={40} height={40} />}
<Icon source={{ uri: icon }} />
</SectionEnd>
</Section>
<Address> {address} </Address>
</Info>
</StoreCard>
)
}
const styles = StyleSheet.create({
rating: {
paddingLeft: 20
}
})
import React from 'react'
import { View, SafeAreaView, FlatList } from 'react-native'
import { Searchbar } from 'react-native-paper'
import { StoreInfo } from '../componentStore/StoreInfo'
import styled from 'styled-components/native'
const SafeArea = styled(SafeAreaView)`
flex:1;
`
const BarSearch = styled(View)`
padding: ${(props) => props.theme.space[3]}
`
const StoreList = styled(FlatList).attrs({
contentContainerStyle: {
paddingHorizontal: 16,
paddingTop: 8,
paddingBottom: 16 }
})
`
`
export default function StorePantalla() {
return (
<SafeArea>
<BarSearch>
<Searchbar
placeholder="Search"
/>
</BarSearch>
<StoreList
data={[{ name: 1 }, { name: 2 }, { name: 3 }]}
renderItem={() => <StoreInfo />}
keyExtractor={(item) => item.name}
/>
</SafeArea>
)
}
import styled from "styled-components/native"
import { View, Text, Image } from 'react-native'
import { Card } from 'react-native-paper'
export const StoreCard = styled(Card)`
background-color: ${(props) => props.theme.colors.bg.secondary}
margin-bottom: ${(props) => props.theme.space[4]}
`
export const StoreCardCover = styled(Card.Cover)`
padding: ${(props) => props.theme.space[4]}
background-color: ${(props) => props.theme.colors.bg.primary}
`
export const Title = styled.Text`
font-family: ${(props) => props.theme.fonts.heading}
padding-left: ${(props) => props.theme.space[3]}
padding-bottom: ${(props) => props.theme.space[1]}
fontSize: ${(props) => props.theme.sizes[2]}
color: ${(props) => props.theme.colors.text.primary}
`
export const Address = styled(Text)`
font-family: ${(props) => props.theme.fonts.body}
padding-left: ${(props) => props.theme.space[3]}
padding-bottom: ${(props) => props.theme.space[4]}
`
export const Info = styled(View)`
padding-right: ${(props) => props.theme.space[2]}
padding-left: ${(props) => props.theme.space[3]}
padding-bottom: ${(props) => props.theme.space[3]}
`
export const Rating = styled(View)`
flex-direction: row;
padding-left: ${(props) => props.theme.space[2]}
padding-bottom: ${(props) => props.theme.space[2]}
`
export const Section = styled(View)`
flex-direction: row;
align-items: center;
`
export const SectionEnd = styled(View)`
flex: 1;
flex-direction: row;
justify-content: flex-end;
`
export const Icon = styled(Image)`
width= 35px;
height= 35px;
margin-left: ${(props) => props.theme.space[3]}
`
最佳答案
请使用此更改部分结束代码并检查您是否可以看到图像。
<SectionEnd>
<Image style={{width: 40, height: 40}} source={{uri: "https://cdn.pixabay.com/photo/2015/09/09/19/56/office-932926_1280.jpg"}}/>
</SectionEnd>
<uses-permission android:name="android.permission.INTERNET" />
<application
android:usesCleartextTraffic="true"
关于javascript - 为什么图像不显示在 React Native 中？失败的 Prop 类型 : Invalid prop `source` supplied to `Image` ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69358101/