React Native：配列のデータからレイアウトを構築する

Question

それで、私はそれ自身を複数回複製する画面上のレイアウトを持っています。私は本当にそれをきれいにしたい。現在、それはこのようなものだ：

import { content } from '../content.js'; 

class Display extends Component { 
    render() { 
    return (
     <View style={styles.displayContainer}> 
     <ScrollView> 
      <View style={styles.row}> 

      <View style={styles.displayItemBlock}> 
       <TouchableOpacity style={styles.displayItem} onPress={this.item1}> 
       <Image 
        style={styles.displayItemImage} 
        source={require('../images/display-item1.jpg')} 
       /> 
       <View style={styles.displayItemText}> 
        <Text style={styles.displayItemTitle}>{content.display_title_item1}</Text> 
        <Text style={styles.recipeItemTime}> 
        <IconMCI name="clock" color="#4F8EF7" /> 2h 30m 
        </Text> 
       </View> 
       </TouchableOpacity> 
      </View> 
      <View style={styles.displayItemBlock}> 
       <TouchableOpacity style={styles.displayItem} onPress={this.item2}> 
       <Image 
        style={styles.displayItemImage} 
        source={require('../images/display-item2.jpg')} 
       /> 
       <View style={styles.displayItemText}> 
        <Text style={styles.displayItemTitle}>{content.display_title_item2}</Text> 
        <Text style={styles.recipeItemTime}> 
        <IconMCI name="clock" color="#4F8EF7" /> 45m 
        </Text> 
       </View> 
       </TouchableOpacity> 
      </View> 
      {/* AND REPEAT... */} 

      </View> 
     </ScrollView> 
     </View> 
    ); 
    } 
} 

だから私は、私は簡単に変化する情報を取得し、配列にそれを置くマップでこれのほとんどを置き換えることができると思いました。だから私はこれを持っています：

import { content } from '../content.js'; 

const dataArray = [ 
    { img: '../images/display-item1.jpg', 
    title: 'content.display_title_item1', 
    func: 'item1', 
    time: '2h 30m' }, 
    { img: '../images/display-item2.jpg', 
    title: 'content.display_title_item2', 
    func: 'item2', 
    time: '45m' }, 
]; 

class Display extends Component { 

    ShowEverything() { 
    return dataArray.map(function (data, i) { 
     return (
     <View key={i} style={styles.displayItemBlock}> 
      <TouchableOpacity style={styles.displayItem} onPress={this.{data.func}}> 
      <Image 
       style={styles.displayItemImage} 
       source={require({data.img)} 
      /> 
      <View style={styles.displayItemText}> 
       <Text style={styles.displaytemTitle}>{data.title}</Text> 
       <Text style={styles.displayItemTime}> 
       <IconMCI name="clock" color="#4F8EF7" /> {data.time} 
       </Text> 
      </View> 
      </TouchableOpacity> 
     </View> 
    ); 
    }); 
    } 

    render() { 
    return (
     <View style={styles.displayContainer}> 
     <ScrollView> 
      <View style={styles.row}> 

      {this.ShowEverything()} 

      </View> 
     </Scroll> 
     </View> 
    ); 
    } 
} 

これは簡単でしょうか？ :)

これはもちろん動作しません。時刻（data.time）は正しく出力されますが、タイトルはcontent.jsから正しいテキストを取得しません（文字列content.display_title_itemが配列から出力されます）。 imgとfuncの項目も期待したとおりに機能しません。

ここで私はオフですか？これがこのDRYを維持する最も明白な方法だと思われます。どんな助けもありがとう。

Answer 1

この

import { content } from '../content.js'; 

const dataArray = [ 
    { img: require('../images/display-item1.jpg'), //this is a known issue in react, dynamic paths needs to assigned like this 
    title: 'display_title_item1', 
    func: 'item1', 
    time: '2h 30m' }, 
    { img: require('../images/display-item2.jpg'), 
    title: 'display_title_item2', 
    func: 'item2', 
    time: '45m' }, 
]; 

class Display extends Component { 

    ShowEverything() { 
    return dataArray.map((data, i) => { // changed to fat arrow func to be in scope of this 
     return (
     <View key={i} style={styles.displayItemBlock}> 
      <TouchableOpacity style={styles.displayItem} onPress={this[data.func]}> // syntax error 
      <Image 
       style={styles.displayItemImage} 
       source={data.img} 
      /> 
      <View style={styles.displayItemText}> 
       <Text style={styles.displaytemTitle}>content[data.title]</Text> // syntax error 
       <Text style={styles.displayItemTime}> 
       <IconMCI name="clock" color="#4F8EF7" /> {data.time} 
       </Text> 
      </View> 
      </TouchableOpacity> 
     </View> 
    ); 
    }); 
    }