React Native flexbox - определить последний элемент в строке - PullRequest
Новая
       24

React Native flexbox - определить последний элемент в строке

2 голосов
/ 22 апреля 2020

У меня есть динамический список c с текстом (теги, например), отображаемым в строке с помощью flex-wrap. Я хочу добавить разделитель маркеров между всеми элементами, кроме каждого последнего в каждой строке.

Например, допустим, у меня есть список ['apple', 'peach', 'orange', 'watermelon', 'pear']. В зависимости от размера экрана, я хочу, чтобы они отображались в строках и небольшими пулями между ними.

яблоко • персик • апельсин

арбуз • груша

Как видите, будет два ряда и маркеры только между элементами в одном ряду. Теперь я могу использовать index, чтобы проверить, является ли это последним элементом в списке arr.map((i, index) => index < arr.length-1 && <View>...</View>), но я получаю пулю после последнего элемента в первой строке

яблоко • персик • оранжевый •

арбуз • груша

и это не то, что я хочу. Теперь предположим, что у меня есть более длинные имена элементов, и только два из них отображаются в первом ряду, я хочу того же эффекта, без маркеров в конце.

Может ли кто-нибудь помочь мне обнаружить последний элемент в одна строка.

Вот пример моего кода. 

<View style={styles.section}>
    {
        tags.map((tag, index) => (
            <View key={tag.id} style={styles.tagItem}>
                <Text style={styles.tagTitle}>{tag.title}</Text>
                {index < tags.length - 1 && <Text>•</Text>}
            </View>
        ))
    }
</View>

А это мой объект стилей: 

{
    section: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    tagItem: {
        paddingHorizontal: 5,
        flexDirection: 'row',
    },
}

1 Ответ

0 голосов
/ 01 мая 2020

Вы можете сделать это с помощью этого css трюка: li + li::before

.list  {
  list-style: none;
  display: flex;
}

li span {
  padding: 20px
}

li + li::before {
      content: "\02022"
}
<ul class="list">
    <li>
        <span>Apple</span>
    </li>
    <li>
        <span>Banana</span>
    </li>
    <li>
        <span>Peach</span>
    </li>
</ul>
...