带有节格式数据的react-native listview行

Question

我尝试使用节标题和行创建列表视图，但是我很难格式化我的JSON文件。我知道格式在源头。

 { sectionID_1: { rowID_1: <rowData1>, ... }, ... }
   *
   *    or
   *
   *      { sectionID_1: [ <rowData1>, <rowData2>, ... ], ... }
   *
   *    or
   *
   *      [ [ <rowData1>, <rowData2>, ... ], ... ]

我试着用这种方式格式化：

{
  "sectionID_1": {
    "r1": {
      "albumId": 1,
      "id": 3,
      "title": "officia porro iure quia iusto qui ipsa ut modi",
      "url": "http://placehold.it/600/24f355",
      "thumbnailUrl": "http://placehold.it/150/1941e9",
    },
    "r2": {
      "albumId2": 4,
      "id3": 8,
      "title2": "officia porro iure quia iusto qui ipsa ut modi",
      "url2": "http://placehold.it/600/24f355",
      "thumbnailUrl3": "http://placehold.it/150/1941e9"
    }
  },
  "sectionID_2": {
    "r1": {
      "albumId": 1,
      "id": 3,
      "title": "officia porro iure quia iusto qui ipsa ut modi",
      "url": "http://placehold.it/600/24f355",
      "thumbnailUrl": "http://placehold.it/150/1941e9",
    },
    "r2": {
      "albumId2": 4,
      "id3": 8,
      "title2": "officia porro iure quia iusto qui ipsa ut modi",
      "url2": "http://placehold.it/600/24f355",
      "thumbnailUrl3": "http://placehold.it/150/1941e9"
    }
  },
}

但是我收到了这个错误

Objects are bot valid as a React child ......

这是index.ios.js的完整来源

＆＃13;

＆＃13;

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  ListView,
  Text,
  View
}
from 'react-native';



class listView extends Component {
  constructor(props) {
    super(props);

    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
    });


    var obj = {
      "sectionID_1": {
        "r1": {
          "albumId": 1,
          "id": 3,
          "title": "officia porro iure quia iusto qui ipsa ut modi",
          "url": "http://placehold.it/600/24f355",
          "thumbnailUrl": "http://placehold.it/150/1941e9",
        },
        "r2": {
          "albumId2": 4,
          "id3": 8,
          "title2": "officia porro iure quia iusto qui ipsa ut modi",
          "url2": "http://placehold.it/600/24f355",
          "thumbnailUrl3": "http://placehold.it/150/1941e9"
        }
      },
      "sectionID_2": {
        "r1": {
          "albumId": 1,
          "id": 3,
          "title": "officia porro iure quia iusto qui ipsa ut modi",
          "url": "http://placehold.it/600/24f355",
          "thumbnailUrl": "http://placehold.it/150/1941e9",
        },
        "r2": {
          "albumId2": 4,
          "id3": 8,
          "title2": "officia porro iure quia iusto qui ipsa ut modi",
          "url2": "http://placehold.it/600/24f355",
          "thumbnailUrl3": "http://placehold.it/150/1941e9"
        }
      },
    };

    this.state = {
      dataSource: ds.cloneWithRowsAndSections(obj),
    };
  }

  render() {
    return (

      < View style = {
        styles.container
      } >
      < ListView dataSource = {
        this.state.dataSource
      }
      renderSectionHeader = {
        this.renderSectionHeader
      }
      renderRow = {
        this.renderRow
      }
      />
      </View >
    );
  }

  renderSectionHeader(sectionData, sectionID) {
    return ( < View style = {
        styles.section
      } >
      < Text style = {
        styles.sectionText
      } > {
        sectionID
      } < /Text>    
      </View >
    )
  }
  renderRow(rowData, sectionID, rowID, highlightRow) {
    return <View >
      < Text > {
        rowData
      } < /Text>
    </View >
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
    marginTop: 40
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('listView', () => listView);

＆＃13;

＆＃13;

＆＃13;

提前致谢!!!!!!!

Answer 1

你不能在同一个文件中混合使用javascript和json。将json代码移动到另一个文件，例如list_data.json，并要求在您需要的文件中

  {
      "sectionID_1": {
        "r1": {
          "albumId": 1,
          "id": 3,
          "title": "officia porro iure quia iusto qui ipsa ut modi",
          "url": "http://placehold.it/600/24f355",
          "thumbnailUrl": "http://placehold.it/150/1941e9",
        },
        "r2": {
          "albumId2": 4,
          "id3": 8,
          "title2": "officia porro iure quia iusto qui ipsa ut modi",
          "url2": "http://placehold.it/600/24f355",
          "thumbnailUrl3": "http://placehold.it/150/1941e9"
        }
      },
      "sectionID_2": {
        "r1": {
          "albumId": 1,
          "id": 3,
          "title": "officia porro iure quia iusto qui ipsa ut modi",
          "url": "http://placehold.it/600/24f355",
          "thumbnailUrl": "http://placehold.it/150/1941e9",
        },
        "r2": {
          "albumId2": 4,
          "id3": 8,
          "title2": "officia porro iure quia iusto qui ipsa ut modi",
          "url2": "http://placehold.it/600/24f355",
          "thumbnailUrl3": "http://placehold.it/150/1941e9"
        }
      },
    };

使用如下

var obj = require('./list_data.json');