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項目也不會按我的預期工作。

我在這裏？看起來這是保持這種乾爽的最明顯的方式;任何幫助，將不勝感激。

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