在 React Native 中跨多列动态对齐从 API 解析的文本项的单元格高度

Question

我从外部位置拉取了三个不同长度的字符串项。我希望每一行中的项目彼此对齐。此外，我希望每个项目的高度能够反映其内容的长度。较短的内容将具有较短的高度，较长的项目将具有较高的单元格高度。

这是我当前的演示 https://snack.expo.io/@leourushi/api-looping-01-threecalls-02

有两个挑战。一个在三列之间。 “标题”和“已发布”很短，但“描述”栏往往要长得多。挑战 #2 是在“描述”部分，每个项目都有不同的长度。有些是 4 行，有些是 5 或 6 行等等。

我找到了一个黑客解决方案，为每个项目分配一个硬编码的“高度”值，如下所示：

cellHeight: {
height: 100,
},

100 只是一个任意数字，目前似乎对大多数项目都有效。但这不是一个聪明的解决方案。

有没有人解决过类似的挑战？

Answer 1

是的，幸运的是你可以在 React Native

中使用 height: 'auto'

          <View style={styles.cellHeight}>
            <View style={styles.lineRow}>
              <View style={styles.leftColumn}>
                <Text> {item.title} </Text>
              </View>
              <View style={styles.midColumn}>
                <Text> {item.description} </Text>
              </View>
              <View style={styles.rightColumn}>
                <Text> {item.published.slice(5, item.published.length-13)} </Text>
              </View>
            </View>
            <View style={styles.lineBreak} />
          </View>

您的 cellHeight 样式将如下所示：

  cellHeight: {
    height: 'auto',
  },

这是我根据你做的点心。

https://snack.expo.io/@mrcarjul/api-looping-01-threecalls-02

在 React Native 中跨多列动态对齐从 API 解析的文本项的单元格高度

Align the cell heights for text items parsed from an API dynamically across multiple columns in React Native

react-native

layout

dynamic

grid-layout

tablelayout