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

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

1 个答案: