React Native:优化项目列表

Question

>我有一个项目列表，每个项目都有一个正文和一个来源。目前它的渲染方式如下：

const ListItem = (props) => {
    const {body, source} = props.context;
    return (
        <View style={styles.item}>>
            <View style={{backgroundColor: 'lightblue'}}>
                <Text style={styles.body}>{body}</Text>
            </View>
            <View style={{backgroundColor: 'lightyellow'}}>
                <Text style={styles.source}>{source}</Text>
            </View>
        </View>
    );
}

这是很多嵌套和容器。可以做得更优化吗？

Answer 1

我将

发表我的评论作为答案。

以前的评论：

我想这取决于你的设计，AFAIK 这在 React Native 中很好，假设你正在使用一种优化的方式来呈现你的列表(例如，使用 FlatList 或类似(

根据您的以下评论，我认为这根本不可怕。

这是一个替代方案。但是，为了可读性，我更喜欢您在问题中发布的片段。

const ListItem = props => {
  const items = [
    { key: 'body', backgroundColor: 'lightblue' },
    { key: 'source', backgroundColor: 'lightyellow' }
  ];
  return (
    <View style={styles.item}>
      {
        items.map(({ key, backgroundColor }) => 
          <View style={{ backgroundColor }}>
            <Text style={styles[key]}>
              { props[key] }
            </Text>
          </View>
        )
      }
    </View>
  )
}

Answer 2

Text 组件确实采用 backgroundColor，因此您可以放弃两个视图：

    <View style={styles.item}>
        <Text style={[styles.body, {backgroundColor: '...'}]}>{body}</Text>
        <Text style={[styles.source, {backgroundColor: '...'}]}>{source}</Text>
    </View>

另外，我不知道styles.item由什么组成，但是如果你想一路走下去，你可以用React.Fragment替换另一个容器视图。