Петля через выбранный объект в нативном реагировании

Question

Я пытаюсь создать приложение, которое извлекает JSON из удаленного URL-адреса, а затем используя этот 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); 

Это работает, но я не нашел никаких документов о том, как создать для или во время цикла, или даже отобразить массив объектов для создания видов в соответствии к количеству элементов в JSON.

Answer 1

Это не точно цикл for, но по существу вызовет funtion для каждого элемента в таблицах (в этом случае таблицы представляют собой массив таблиц, через которые выполняется итерация), а затем возвращаем jsx div и добавляем, что чтобы перечислить, поэтому, когда я помещаю {list} внутри возврата функции рендеринга, он отображает все элементы, почти как ng-repeat в angularjs. Надеюсь, это поможет.

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> 
}