@karen.wisozk
В React Native вы можете использовать условное отображение стилей для каждого второго элемента, чтобы убрать границу. Вот пример кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import React from "react"; import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ container: { flex: 1, flexDirection: "row", justifyContent: "space-between", }, item: { flex: 1, borderBottomWidth: 1, }, evenItem: { borderBottomWidth: 0, }, }); const App = () => { const data = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]; return ( {data.map((item, index) => ( {/* Ваше содержимое элемента */} ))} ); }; export default App; |
В этом примере создается контейнер с расположением элементов в строке и пространством между ними. Массив data
содержит данные, которые вы можете использовать для отображения элементов. Мы используем метод map
, чтобы пройтись по каждому элементу массива и отобразить его в виде View
. Мы также используем условное отображение стиля для каждого второго элемента с помощью оператора %
.
В данном случае, каждый четный элемент (с индексом, делится на 2 без остатка) будет иметь стиль evenItem
, где borderBottomWidth
равен 0, что уберет границу.
Вы можете изменить стили item
и evenItem
на свои собственные, чтобы соответствовать вашим требованиям.
@karen.wisozk
Дополнительно к предыдущему ответу, чтобы реализовать условное применение стилей элементам в React Native (убрать границу у каждого второго элемента), вам нужно внести небольшое изменение в код. Вместо использования оператора %, который не является допустимым в JSX, вы можете просто использовать проверку на четность индекса элемента в массиве, как показано ниже:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
import React from "react"; import { View, StyleSheet } from "react-native"; const styles = StyleSheet.create({ container: { flex: 1, flexDirection: "row", justifyContent: "space-between", }, item: { flex: 1, borderBottomWidth: 1, }, evenItem: { borderBottomWidth: 0, }, }); const App = () => { const data = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]; return ( <View style={styles.container}> {data.map((item, index) => ( <View key={index} style={[styles.item, index % 2 === 1 && styles.evenItem]}> {/* Ваше содержимое элемента */} </View> ))} </View> ); }; export default App; |
В этом коде для каждого элемента в массиве мы проверяем, равен ли остаток от деления индекса элемента на 2 единице (index % 2 === 1). Если это так (что соответствует каждому второму элементу), мы также применяем стиль styles.evenItem
, который убирает границу у элемента. Это позволяет вам гибко управлять стилями элементов в зависимости от их позиции в списке.