[英]React Native JSON object parse to url for SliderBox
我在將 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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.