반응 네이티브에서 flatList에 격자 선을 표시하는 방법

ItemSeparatorComponent 를 사용할 수 있습니다   FlstList 의 재산

따라서 separtor view를 반환하는 하나의 함수를 만듭니다 :

renderSeparatorView = () => {
    return (
      <View style={{
          height: 1, 
          width: "100%",
          backgroundColor: "#CEDCCE",
        }}
      />
    );
  };

이제 pyzwyz에서이 방법을 사용하십시오.  

FlatList

이렇게하면 가로 구분선보기가 만들어집니다.

수직 구분 기호보기 스타일 변경 :

 <FlatList
        ...
        ItemSeparatorComponent={this.renderSeparatorView}
      />

테이블을 만드는 쉬운 방법을 찾았습니다.react-native-table-component를 사용하여

    style={{
          height: 100%, 
          width: "1",
          backgroundColor: "#CEDCCE",
        }}

자세한 내용은 https://www.npmjs.com/package/react-native-table-component

여기에서 ItemSeparatorComponent는 가로 테두리를 렌더링하고 렌더링 항목은 세로 테두리를 표시합니다. . 아래 예제는 두 개의 열에 대해 작동합니다. numColumns가 무엇이든 index % 2 numColumns가 3 인 경우 인덱스 % 3이됩니다.

import React, { Component } from "react";
import { StyleSheet, View } from 'react-native';
import { Table, TableWrapper, Row, Rows } from 'react-native-table-component';
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableHead: ['SL#', 'Name'],
      tableData: [
        ['1', 'ab'],
        ['2', 'gh'],
        ['3', 'asdf'],
      ]
    }
  }
  render() {
    const state = this.state;
    return (
      <View style={styles.container}>
        <Table>
          <Row data={state.tableHead} flexArr={[1, 1]} style={styles.head} textStyle={styles.text} />
          <TableWrapper style={styles.wrapper}>
            <Rows data={state.tableData} flexArr={[1, 1]} style={styles.row} textStyle={styles.text} />
          </TableWrapper>
        </Table>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    paddingTop: 30,
    backgroundColor: '#fff'
  },
  head: {
    height: 40,
    backgroundColor: '#f1f8ff'
  },
  wrapper: {
    flexDirection: 'row'
  },
  title: {
    flex: 1, backgroundColor: '#f6f8fa'
  },
  row: {
    height: 28
  },
  text: {
    textAlign: 'center'
  }
});

<FlatList numColumns={2} ItemSeparatorComponent={this.renderSeparator} </FlatList> renderSeparator = () => ( <View style={{ backgroundColor: 'black', height: 1 }} /> ); renderItem={({ item, index }) => ( <Text style={[styles.text, index % 2 !== 0 && {borderLeftWidth: 1, borderLeftColor: 'black'}]}>{item}</Text> )}