как добавить компонент в объект JSON - PullRequest
0 голосов
/ 28 октября 2019

Использование библиотеки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":{}}}]
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...