javascript - 将 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
推荐阅读
- javascript - 如何在javascript中获取元素的x位置
- java - 删除文本不保存
- python - 使用 subprocess.check_output() 在 python 中搜索文件
- openwrt - Openwrt 脚本 - 自动启动 Shadowsocks
- scala - 线程“main”中的异常 java.lang.NoClassDefFoundError: scala/Product$class
- wordpress - 明信片中的 Wordpress 下载计数器
- c++ - 使用 VS2015 更改应用程序的入口点
- python - 分段腌制对象与一次全部腌制之间的区别?
- c++ - 创建项目文件夹中的纹理
- javascript - 卡片列字段的引导 Jquery 搜索过滤器