Использование библиотекиact-native-onboarding-swiper, где есть массив для страниц
Я создал массив из своего объекта JSON API, как массив, необходимый для экранов с использованием array.map.
screens.map(function(item) {
return {
backgroundColor: '#FFFFFF',
image: (<Image source={{uri: `${item['image']}`}} />),
title: item.title,
subtitle: item.subtitle
};
})
Однако, поскольку изображения являются компонентами изображения, массив становится действительно грязным и не подходит для массива страниц реакции-native-onboarding-swiper
Что я могу сделать
РЕДАКТИРОВАТЬ:
Вот структура объекта, которая требуется:
backgroundColor: '#FFFFFF',
image: <Image source={{uri: "https://example.com}} />,
title: item.title,
subtitle: item.subtitle
Вот структура объекта, которая возникает, когда я пытаюсь сопоставить с компонентом изображения:
Object {
"backgroundColor": "#FFFFFF",
"image": Object {
"$$typeof": Symbol(react.element),
"_owner": FiberNode {
"tag": 0,
"key": null,
"type": [Function OnboardScreen],
},
"_store": Object {},
"key": null,
"props": Object {
"source": Object {
"uri": "[object Object]",
},
"style": Object {
"height": 300,
"width": 300,
},
},
"ref": null,
"type": Object {
"$$typeof": Symbol(react.forward_ref),
"abortPrefetch": [Function abortPrefetch],
"displayName": "Image",
"getSize": [Function getSize],
"prefetch": [Function prefetch],
"propTypes": Object {
"accessibilityActions": [Function bound checkType],
"accessibilityComponentType": [Function bound checkType],
"accessibilityElementsHidden": [Function bound checkType],
"accessibilityHint": [Function bound checkType],
"accessibilityIgnoresInvertColors": [Function bound checkType],
"accessibilityLabel": [Function bound checkType],
"accessibilityLiveRegion": [Function bound checkType],
"accessibilityRole": [Function bound checkType],
"accessibilityStates": [Function bound checkType],
"accessibilityTraits": [Function bound checkType],
"accessibilityViewIsModal": [Function bound checkType],
"accessible": [Function bound checkType],
"blurRadius": [Function bound checkType],
"collapsable": [Function bound checkType],
"defaultSource": [Function bound checkType],
"fadeDuration": [Function bound checkType],
"hitSlop": [Function bound checkType],
"importantForAccessibility": [Function bound checkType],
"loadingIndicatorSource": [Function bound checkType],
"nativeID": [Function bound checkType],
"needsOffscreenAlphaCompositing": [Function bound checkType],
"onAccessibilityAction": [Function bound checkType],
"onAccessibilityTap": [Function bound checkType],
"onError": [Function bound checkType],
"onLayout": [Function bound checkType],
"onLoad": [Function bound checkType],
"onLoadEnd": [Function bound checkType],
"onLoadStart": [Function bound checkType],
"onMagicTap": [Function bound checkType],
"onMoveShouldSetResponder": [Function bound checkType],
"onMoveShouldSetResponderCapture": [Function bound checkType],
"onResponderGrant": [Function bound checkType],
"onResponderMove": [Function bound checkType],
"onResponderReject": [Function bound checkType],
"onResponderRelease": [Function bound checkType],
"onResponderTerminate": [Function bound checkType],
"onResponderTerminationRequest": [Function bound checkType],
"onStartShouldSetResponder": [Function bound checkType],
"onStartShouldSetResponderCapture": [Function bound checkType],
"pointerEvents": [Function bound checkType],
"progressiveRenderingEnabled": [Function bound checkType],
"removeClippedSubviews": [Function bound checkType],
"renderToHardwareTextureAndroid": [Function bound checkType],
"resizeMethod": [Function bound checkType],
"resizeMode": [Function bound checkType],
"shouldRasterizeIOS": [Function bound checkType],
"source": [Function bound checkType],
"style": [Function anonymous],
"testID": [Function bound checkType],
},
"queryCache": [Function queryCache],
"render": [Function Image],
"resolveAssetSource": [Function resolveAssetSource],
},
},
"subtitle": "Create a beautiful welcome journey, easily.",
"title": "Onboard with style.",
},
Вот что выводит JSON.stringify (screen):
[{"backgroundColor":"#FFFFFF","title":"Onboard with style.","subtitle":"Create a beautiful welcome journey, easily.","image":{"type":{"displayName":"Image","propTypes":{}},"key":null,"ref":null,"props":{"style":{"height":300,"width":300},"source":{"uri":"Create a beautiful welcome journey, easily."}},"_owner":null,"_store":{}}},{"backgroundColor":"#FFFFFF","title":"Go on, get into it!","subtitle":"Insert call to action links, video links, buttons... ","image":{"type":{"displayName":"Image","propTypes":{}},"key":null,"ref":null,"props":{"style":{"height":300,"width":300},"source":{"uri":"Insert call to action links, video links, buttons... "}},"_owner":null,"_store":{}}},{"backgroundColor":"#FFFFFF","title":"Hola!","subtitle":"Welcome to Aotomot.","image":{"type":{"displayName":"Image","propTypes":{}},"key":null,"ref":null,"props":{"style":{"height":300,"width":300},"source":{"uri":"Welcome to Aotomot."}},"_owner":null,"_store":{}}},{"backgroundColor":"#FFFFFF","title":"Get creative!","subtitle":"Insert background images, gifs, update copy anytime...","image":{"type":{"displayName":"Image","propTypes":{}},"key":null,"ref":null,"props":{"style":{"height":300,"width":300},"source":{"uri":"Insert background images, gifs, update copy anytime..."}},"_owner":null,"_store":{}}}]