Как в react native создать блоки с рамками у которых поведение было бы как в css — border-collapse: collapse?

В React Native отсутствуют некоторые стандартные свойства из CSS, включая свойство border-collapse. Однако, существует несколько подходов, которые можно использовать для создания блоков с рамками с аналогичным поведением.

Первый подход - это использование View элемента для создания блоков с рамками. Вы можете задать рамку и отступы между блоками, чтобы они выглядели как слившиеся вместе. Например:

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

const App = () => {
  return (
    <View style={styles.container}>
      <View style={styles.box}></View>
      <View style={styles.box}></View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    borderWidth: 1,
  },
  box: {
    flex: 1,
    borderWidth: 1,
    margin: -1,
    borderColor: 'black',
  },
});

export default App;

В этом примере мы создаем контейнер с flexDirection: 'row' для расположения блоков горизонтально. Затем мы устанавливаем borderWidth: 1 для контейнера и каждого блока, и задаем margin: -1 для каждого блока. Это приведет к тому, что рамки блоков выглядят слившимися вместе.

Второй подход - это использование сторонних библиотек или компонентов, которые предлагают функциональность аналогичную свойству border-collapse. Например, вы можете использовать библиотеку react-native-table-component, чтобы создать таблицу с сливающимися рамками:

import React from 'react';
import { StyleSheet } from 'react-native';
import { Table, Row } from 'react-native-table-component';

const App = () => {
  const tableData = [
    ['Cell 1', 'Cell 2'],
    ['Cell 3', 'Cell 4'],
  ];

  return (
    <Table borderStyle={{ borderWidth: 1 }}>
      {
        tableData.map((rowData, index) => (
          <Row
            key={index}
            data={rowData}
            borderStyle={{ borderWidth: 0 }}
            textStyle={styles.text}
          />
        ))
      }
    </Table>
  );
};

const styles = StyleSheet.create({
  text: {
    margin: 6,
  },
});

export default App;

В этом примере мы используем Table компонент из react-native-table-component. Мы устанавливаем borderStyle: { borderWidth: 1 } для таблицы и borderStyle: { borderWidth: 0 } для каждой строки, чтобы передать управление рамками внутренним элементам.

Оба подхода имеют свои особенности и ограничения, поэтому выбор зависит от конкретных требований вашего проекта.