Question

我正在尝试构建一个从远程URL获取JSON的应用程序，然后使用此JSON构建少量视图。

这是我的应用代码：

/**
 * DeepThoughts Template
 */
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
} = React;

var REQUEST_URL = 'http://www.geektime.co.il/appApi/main.json';

var AwesomeProject = React.createClass({
  getInitialState: function() {
    return {
      thought: '',
    };
  },
  componentDidMount: function() {
      this.fetchData();
  },
  fetchData: function() {
      fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
          this.setState({
              thought: { title: responseData[0].title, content:responseData[0].content },
          });
      })
      .done();
  },
  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.textContainer}>
          <Text style={styles.title}>
            {this.state.thought.title}
          </Text>
          <Text style={styles.text}>
            {this.state.thought.content}
          </Text>
        </View>
      </View>
    );
  }
});

var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  textContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 30,
    textAlign: 'center',
    margin: 10,
  },
  text: {
    fontSize: 18,
    paddingLeft: 20,
    paddingRight: 20,
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  buttonContainer: {
    bottom: 0,
    flex: .1,
    width: windowSize.width,
    backgroundColor: '#eee',
  },
  button: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  buttonText: {
    fontSize: 30,
    color: '#666666',
  },
});

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

这很有效，但我没有找到任何关于如何创建for或while循环的文档，甚至没有找到对象数组的映射，以便根据JSON中的项目数创建视图。

Answer 1

这不是一个for循环，但实质上会调用表中每个元素的函数（在这种情况下，表是我迭代的表数组），然后返回jsx div并将其添加到列表中，所以当我将{list}放在render函数的返回内部时，它将显示所有元素，几乎就像angularjs中的ng-repeat一样。我希望这有帮助。

render: function() {
    console.log(this.props);
    var i = 0;
  var list = this.props.tables.map(function(tableDataProps){
      if(i==4){
      i=1;
    return <div>  
        <div className='row' style={styles.border}></div>
        <div className="col-sm-3 col-sm-12" style={styles.padding}>
                <h1 style={styles.headings}>{tableDataProps.title}</h1>
                <h2>{tableDataProps.id}</h2>
                <CurrentTable jobs={tableDataProps} /> 
            </div>
            </div>    
      }
      else{
      i++;
    return  <div className="col-sm-3 col-sm-12" style={styles.padding}>
                <h1 style={styles.headings}>{tableDataProps.title}</h1>
                <CurrentTable jobs={tableDataProps} /> 
            </div>
      }
  });
  return <div>
    {list}
  </div>
}

在本机反应中循环获取的对象

1 个答案: