javascript - React Native JSON对象解析为SliderBox的URL

我在将URL作为道具传递给SliderBox时遇到问题
如果我在组件文件或渲染的屏幕中使用状态或对象传递图像，则效果很好。
我正在使用JSON对象的url
我已经使用SliderBox如下所示：

<BackgroundCarousel images={selectedPlace.imageUrl}/>

以下是SliderBox的组件代码。

import React, { Component } from "react";
import { StyleSheet, Text, View } from "react-native";
 import Colors from '../constants/Colors';
import { SliderBox } from "react-native-image-slider-box";

export default class BackgroundCarousel extends Component {
  constructor(props) {
    super(props);

  }
  render() {
    return (
    <View style={styles.container}>
     {this.props.images&&this.props.images.map((image,i)=>
     <SliderBox
      key={i}
      images={image}
      sliderBoxHeight={200}
      dotColor={Colors.darkWhite}
      inactiveDotColor="#90A4AE"
      paginationBoxVerticalPadding={20}
      autoplay
      circleLoop
      dotStyle={{
       width: 15,
       height: 15,
       borderRadius: 15,
       marginHorizontal: 10,
       padding: 0,
       margin: 0
     }}
     />
    )
   }
     </View>
   );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

下面是我的数据模型

class Places {
constructor(
id,
categoryIds,
title,
googleRating,
imageUrl,
restrooms,
generalDetails,
whatIsHere,
address,
website,
phoneNumber,
googleRatingFilter,
parkingFilter,
restroomFilter
){
    this.id =id;
    this.categoryIds = categoryIds;
    this.title =title;
    this.googleRating=googleRating;
    this.imageUrl=imageUrl;
    this.restrooms = restrooms;
    this.generalDetails = generalDetails;
    this.whatIsHere=whatIsHere;
    this.address = address;
    this.website=website;
    this.phoneNumber=phoneNumber;
    this.googleRatingFilter= googleRatingFilter;
    this.parkingFilter= parkingFilter;
    this.restroomFilter= restroomFilter;
}
}
export default Places;

我设置如下值

import Places from '../models/places';

export const PLACES =[
    // Restaurants
        new Places(
         'p1',
         'c3',
         "Nepal's Cafe",
         '970577703',
         '4.3 ✪',
         ["https://media-cdn.tripadvisor.com/media/photo-s/01/e6/a3/7d/nepal-cafe.jpg",
         "https://media-cdn.tripadvisor.com/media/photo-s/05/6d/1a/87/nepal-s-cafe.jpg",
         "https://source.unsplash.com/1024x768/?girl",
         "https://source.unsplash.com/1024x768/?tree"
      ],
         "Yes",
         [
         "Nepal's Cafe",
         'Google Rating - 4.3 ✪',
         'Restrooms - Yes',
         '184 E Elkhorn Ave, Estes Park, CO 80517'
         ],
         [
             'Curry',
             'Momo'
         ],
         '184 E Elkhorn Ave, Estes Park, CO 80517',
         "https://www.facebook.com/pages/Nepals-Cafe/166103146809347?utm_source=tripadvisor&utm_medium=referral",
         '970577703',
         true, //googleRating
         true, // Parking
         true  // Restroom
       ), ....

我的ios和android设备显示不同的错误。

下面是要查看的图像错误。任何帮助，将不胜感激。

最佳答案

您正在获取数组。

这样尝试

    render() {
     return (
     <View style={styles.container}>
      {this.props.images&&this.props.images.map(image=>
      <SliderBox
       images={image}
       sliderBoxHeight={200}
       dotColor={Colors.darkWhite}
       inactiveDotColor="#90A4AE"
       paginationBoxVerticalPadding={20}
       autoplay
       circleLoop
       dotStyle={{
        width: 15,
        height: 15,
        borderRadius: 15,
        marginHorizontal: 10,
        padding: 0,
        margin: 0
      }}
      />
     )
    }
      </View>
    );
   }

您可以检查我为您显示的此示例以显示...
根据您的目标，您可以更改https://codesandbox.io/s/xenodochial-lumiere-xjhfm