React Native - 如何将json转换为DeckSwiper组件的数组?

时间:2017-11-21 20:50:55

标签: javascript arrays json react-native native-base

我想使用json文件而不是在下面使用静态数组,所以我可以自己更新数据。 cards数组用于DeckSwiper组件(参见:https://docs.nativebase.io/Components.html#deckswiper-def-headref

const cards = [
      {
        text: 'text1',
        name: '1',
      image: {
            uri: 'http://www.xxx.xx/2.jpg'
        }
      },
        {
        text: 'text2',
        name: '2',
      image: {
            uri: 'http://www.xxx.xx/2.jpg'
        }
      },];

我想要获取的json看起来像这样。

{ 
   "text1": "text1",
     "name1": "1",
     "image1": {
        "uri1": "http://www.xxx.xx/1.jpg"
    },
   "text2": "text2",
     "name2": "2",
     "image2": {
        "uri2": "http://www.xxx.xx/2.jpg"
    }
}

所以我想使用'fetch'来获取json文件。 首先在构造函数中启动数组,如下所示。

 constructor() {
     super();
    this.state = {
      active: 'true',
       response: [{text: '', name: '', image: {uri: ''}}],
      } 
  }

然后我在componentDidMount()中使用'fetch',就像这样。

  componentDidMount() {

         fetch("http://www.xxx.xx/test.json", { method: 'get' })
         .then((response) => response.json())
      .then((responseJson) => {
               this.setState({ response: responseJson });
            });
  } 

如何将json转换为数组?因为在下面的代码中,dataSource需要一个数组而不是一个对象。

render() {
    return(
    ...
   <DeckSwiper dataSource={this.state.response}
    ...    
    />
     );
 }

0 个答案:

没有答案