Как убрать border у каждого второго элемента react native?

@willa_will 

В 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
34
35
36
37
38

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Items = [1, 2, 3, 4, 5, 6];

const App = () => {
  return (
    <View style={styles.container}>
      {Items.map((item, index) => (
        <View
          key={item}
          style={[
            styles.item,
            index % 2 === 0 ? { borderRightWidth: 0 } : null,
          ]}
        >
          <Text>{item}</Text>
        </View>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  item: {
    width: '50%',
    padding: 20,
    borderRightWidth: 1,
    borderBottomWidth: 1,
    borderColor: 'grey',
  },
});

export default App;

В этом примере мы используем цикл map для итерации по массиву Items и для каждого элемента мы устанавливаем условный стиль. Если индекс элемента делится на 2 без остатка, мы устанавливаем borderRightWidth в 0, чтобы убрать границу.

@willa_will 

import React from 'react'; import { View, Text, StyleSheet } from 'react-native';

const Items = [1, 2, 3, 4, 5, 6];

const App = () => { return ( {Items.map((item, index) => ( <View key={item} style={[ styles.item, index % 2 === 1 ? { borderWidth: 0 } : null, ]} > {item} ))} ); };

const styles = StyleSheet.create({ container: { flexDirection: 'row', flexWrap: 'wrap', }, item: { width: '50%', padding: 20, borderWidth: 1, borderColor: 'grey', }, });

export default App; В этом примере мы используем цикл map для итерации по массиву Items и для каждого элемента мы устанавливаем условный стиль. Если индекс элемента делится на 2 с остатком 1, мы устанавливаем borderWidth в 0, чтобы убрать границу.