Реагируйте Native, регулируя размер шрифта listItem динамически

Question

Привет, как показано на рисунке, вы не можете видеть полный текст, однако я не хочу уменьшать размер шрифта для всех остальных элементов.

Только если этоони больше 16 в длину.

Могу ли я вернуть fontSize в моем методе renderTitleStyle, или я могу сделать это внутри реквизитов ListItem, например, {infoText.length > 16 ? (fontSize: 12) : (fontSize: 32)} Однако я не думаю, что это работает.

  renderTitleStyle = item => {
const infoText = item.location_from + item.location_to;
if (infoText.length > 12) {
  // Return fontSize ???
}
console.warn(infoText.length);
};


        <ListItem
      style={styles.activeUser}
      onPress={() => this.toggleModalConfirmTrip(item)}
      roundAvatar
      subtitle={item.user[0].name}
      titleStyle={this.renderTitleStyle(item)}
      title={`${item.location_from} to ${item.location_to} `}
      ....[![Example of text not fitting][1]][1]

Answer 1

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

<Text style={[styles.mainStyles, {fontSize: ((infoText && infoText.length) > 16 ? 12 :32) }]}>
   {/*other elements*/}
</Text>

В вашем конкретном случае я бы попытался передать это условнокак свойство для ListItem Component.

titleStyle={this._renderItemTitleStyle(item)}

не забудьте создать функцию.

_renderItemTitleStyle = (item) => {
  if (item && Object.keys(item).length) {
    const infoText = item.location_from + item.location_to;
    return {fontSize: (infoText.length > 16 ? 12 :32)}
  }
  console.warn("param item has no properties");
}