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

Question

我在将 URL 作为 props 传递给 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 设备显示不同的错误。

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

Answer 1

您正在获取数组。

尝试这样

    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