如何以编程方式循环通过react-native-onboarding-swiper中的“页面”？

Question

我正在通过graphQL获取数据，并且希望能够从无头cms本身编辑https://github.com/jfilter/react-native-onboarding-swiper中的“页面”部分。所有示例都是硬编码数据。

我从API获取的数据是如下所示的值：

{
  {
    color: 'red',
    url: 'https://dummyimage.com/300.png',
    title: 'Title 1',
    subtitle: 'Subtitle 1'
  },
  {
    color: 'blue',
    url: 'https://dummyimage.com/400.png',
    title: 'Title 2',
    subtitle: 'Subtitle 2'
  }
}

下面的示例有效，但是经过了硬编码。如果要从API接收数据，如何使用map（）循环？

import { Image } from 'react-native';
import React from 'react';
import Onboarding from 'react-native-onboarding-swiper';

        const allPages = [
       {
              backgroundColor: '#fff',
              image: <Image source={require('./images/circle.png')} />,
              title: 'Onboarding Page 1',
              subtitle: 'This is one',
        }
    ];


const Simple = () => (
    <Onboarding
      pages={allPages}
    />
);

我希望收到的json数据将显示在“页面”部分中。 这样，可以根据传入的json数据创建多个“页面”。