Выравнивание высоты ячеек для текстовых элементов, динамически анализируемых API, по нескольким столбцам в React Native - PullRequest
Новая
       46

Выравнивание высоты ячеек для текстовых элементов, динамически анализируемых API, по нескольким столбцам в React Native

1 голос
/ 22 июня 2019

У меня есть три строковых предмета, извлеченные из внешнего места различной длины. Мне бы хотелось, чтобы элементы в каждом ряду выровнялись друг с другом. Кроме того, я хотел бы, чтобы высота каждого элемента отражала длину его содержимого. Короткое содержимое будет иметь небольшую высоту, более длинный элемент будет иметь более высокую высоту ячейки.

Это мое текущее демо https://snack.expo.io/@leourushi/api-looping-01-threecalls-02

Есть две проблемы. Один находится между тремя колоннами. «Заголовок» и «опубликовано» очень короткие, но столбец «описание» имеет тенденцию быть намного длиннее. Задача № 2 заключается в том, что в разделе «описание» каждый элемент имеет разную длину. Некоторые из них 4 строки, другие 5 или 6 строк и так далее.

Я нашел решение для взлома, назначив жестко закодированное значение высоты для каждого элемента, как показано ниже: 

cellHeight: {
height: 100,
},

100 - это просто произвольное число, которое пока работает для большинства предметов. Но это не разумное решение.

Кто-нибудь сталкивался с подобной проблемой?

1 Ответ

1 голос
/ 24 июня 2019

Да, к счастью, вы можете использовать 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

...