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