使用变量时，本机元素图像组件不显示图像

问题描述

我使用 react-native-elements 库来设计我的应用程序，我想创建我的产品详细信息页面我传递的所有数据都实现了，但是当我想设置图像 URI 时，图像组件只显示我手动将 URL 作为字符串显示图像

图片网址：https://boho-box.com/storage/upload/product/IMG_1696_1609848185.jpg

Item.js 文件：

import * as React from 'react';
import { View,Text,StyleSheet,ActivityIndicator } from 'react-native';
import { Card,Button,Image } from 'react-native-elements';
import { useNavigation } from '@react-navigation/native';

function Item(props){

 const navigation = useNavigation();

 return(
   <View>
      <Image
         style={styles.image}
         source={{ uri: props.pDetail.img }}
         PlaceholderContent={<ActivityIndicator />}
       />
      <Text>{props.pDetail.title}</Text>
      <Text>Price: ${props.pDetail.price}</Text>
      <Text>{props.pDetail.img}</Text>
   </View>
 );
}

const styles = StyleSheet.create({
  row: {
      flex: 1,flexDirection: 'row',justifyContent: 'center',},col: {
      flex: 1,image: {
    width: 200,height: 200,}
});

export default Item;

使用source={{ uri: props.pDetail.img }}时的页面截图：

使用source={{ uri: 'https://boho-Box.com/storage/upload/product/IMG_1696_1609848185.jpg' }}时的页面截图：

当我使用 react-native 图像组件时也会发生这种情况。

Detail.js:

import * as React from 'react';
import { View,Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import Item from './components/Item';


function DetailsScreen({ route,navigation }) {

  const { name,price,img } = route.params;

  const detail = {
    title: JSON.stringify(name),price: JSON.stringify(price),img:   JSON.stringify(img),}

  return (
    <View style={{ flex: 1,alignItems: 'center',justifyContent: 'center' }}>
      <Item pDetail={detail} />
    </View>
  );
}

export default DetailsScreen;

解决方法

将 UnixListener 文件中的详细信息 const 更改为：

JSON.stringify 将图像路径放在“”之间

Detail.js