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

React Native：从数组中的数据构建布局

React Native: building a layout from data in an array

arrays

react-jsx

react-native