>

직원 세부 정보 목록이 있습니다. 그들 사이에 그리드 선이 필요합니다 (테이블로 보려면). 반응 네이티브에서 flatList로 어떻게 가능합니까?

   <View >
                  <View style={Styles.empTab}>
                    <ScrollView horizontal={true} >
                      <View style={Styles.empTable}>
                        <Text>SL#</Text>
                        <FlatList
                          //style={Styles.empData}
                          data={this.state.empData}
                          keyExtractor={item => item.emp_id + ""}
                          renderItem={({ item }) => (
                            <View style={Styles.empitem}>
                              <Text>{item["emp_id"]}</Text>
                            </View>
                          )}
                        />
                      </View>
                      <View style={Styles.empTable}>
                        <Text>Name</Text>
                        <FlatList
                          //style={Styles.empData}
                          data={this.state.empData}
                          keyExtractor={item => item.emp_id + ""}
                          renderItem={({ item }) => (
                            <View  style={Styles.empitem}>
                              <Text>{item["name"]}</Text>
                            </View>
                          )}
                        />
                      </View>
                    </ScrollView>
                  </View>

결과는 다음과 같습니다

SL#  Name 
1    ab     
2     gh

테이블로 볼 필요가 있습니다 (예 : 행 열 테두리)

  • 답변 # 1

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

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

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

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

    FlatList
    
    

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

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

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

  • 답변 # 2

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

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

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

  • 답변 # 3

    여기에서 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> )}

관련 자료

  • 이전 html - CSS가 잘못 표시
  • 다음 VBNET에서 PHP/MySQL을 통한 외국어 문자열