英文:
Is there a way to pass a prop image in react native?
问题
以下是您提供的代码的翻译部分：
Home Screen 代码:
const HomeScreen = ({navigation}) => {
const [shoes, setShoes] = useState([])
const [isLoading, setIsLoading] = useState(true)
const fetchData = async () => {
const receivedShoes = await fetch(`http://192.168.8.103:8080/shoes`)
const receivedShoesJSON = await receivedShoes.json()
setShoes(receivedShoesJSON)
setIsLoading(false)
}
useEffect(() => {
fetchData();
});
return(
<View style={styles.container}>
{isLoading ? (<ActivityIndicator/>) :
(<FlatList data={shoes} keyExtractor={({id}) => id} renderItem={({item}) => (
<ShoeDisplay brand={item.brand} name={item.name} price={item.price} image={item.photoLocation}/>
)} />
)}
<StatusBar style="auto" />
</View>
)
}
photoLocation 看起来像这样 - "photoLocation":"../client/public/images/1685958934714.jpeg"
我正在进行子串操作以删除 ../client，我知道这不是最佳做法，但这不是我的问题。
我尝试使用以下方式设置 source={image}，其中 image 是：
const image = require(`..` + props.image.substring(9))
这会导致错误：无法找到模块 '../public/images/1685958934714.jpeg'。
以及下面你看到的代码：
Shoe Display 代码:
const ShoeDisplay = (props) => {
return(
<View style={styles.container}>
<Image style={styles.image} source={{uri:`..${props.image.substring(9)}`}}/>
<Text style={styles.brand} id="brand">{props.brand}</Text>
<Text style={styles.name} id="display-title">{props.name}</Text>
<Text style={styles.price} id="price">€{props.price}</Text>
</View>
)
}
这不显示任何错误，但也不显示图片。
英文:
I am having an issue passing a prop image are there any issues with my code?
**Home Screen code: **
const HomeScreen = ({navigation}) =>
{
const [shoes, setShoes] = useState([])
const [isLoading, setIsLoading] = useState(true)
const fetchData = async () =>
{
const receivedShoes = await fetch(`http://192.168.8.103:8080/shoes`)
const receivedShoesJSON = await receivedShoes.json()
setShoes(receivedShoesJSON)
setIsLoading(false)
}
useEffect(() => {
fetchData();
});
return(
<View style={styles.container}>
{isLoading ? (<ActivityIndicator/>) :
(<FlatList data={shoes} keyExtractor={({id}) => id} renderItem={({item}) =>(
<ShoeDisplay brand = {item.brand} name = {item.name} price = {item.price} image = {item.photoLocation}/>
)} />
)}
<StatusBar style="auto" />
</View>
)
}
photoLocation looks like this - "photoLocation":"../client/public/images/1685958934714.jpeg"
I am doing the substring as I want to remove the ../client I know it's not optimal but this is not my issue
I tried source={image} with the image being
const image = require(`..` + props.image.substring(9))
This results in Uncaught Error: Cannot find module '../public/images/1685958934714.jpeg'
and the one that you see below
**Shoe Display code: **
const ShoeDisplay = (props) =>
{
return(
<View style={styles.container}>
<Image style={styles.image} source={{uri:`..${props.image.substring(9)}`}}/>
<Text style={styles.brand} id="brand">{props.brand}</Text>
<Text style={styles.name} id="display-title">{props.name}</Text>
<Text style={styles.price} id="price">€{props.price}</Text>
</View>
)
}
This does not show any errors however does not show the photo either.
答案1
得分: 0
你可以通过 ""\"" 将字符串分割，然后获取结果数组的最后一个元素。我们将该元素称为 'imageId'。
然后，使用
const image = require(`../public/images` + imageId)
英文:
You can split the string by "\" and then get the last element of the resulting array. Let's call that element 'imageId'.
Then, use
const image = require(`../public/images` + imageId)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论