홈>
직원 세부 정보 목록이 있습니다. 그들 사이에 그리드 선이 필요합니다 (테이블로 보려면). 반응 네이티브에서 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
- 답변 # 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> )}
관련 자료
- React Native Flatlist는 다른 페이지로 이동
- 기본 반응은 FlatList 항목의 일부를 조건부로 렌더링합니다
- 네이티브 반응 FlatList로 작업하기 위해 목록이 포함 된 객체로 목록을 전달하는 방법은 무엇입니까?
- 기본 스크롤을 플랫리스트 onChangeText의 맨 위로 반응
- javascript - React Native에서 Flatlist를 사용하여 데이터가 렌더링되지 않습니다
- javascript - 순수 구성 요소의 React Native 업데이트 FlatList 데이터
- reactjs - React Native에서 플랫리스트의 매개 변수 업데이트
- React native flatlist - react 네이티브 플랫리스트 - 보낸 메시지와받은 메시지 구분
- javascript - null을 돌려주는 경우 네이티브 플랫리스트에 반응
- javascript - BorderBottom이 뷰 상단에 React Native를 추가했습니다
- vue.js - vue js에서 네이티브 이벤트에 반응하는 방법은 무엇입니까?
- 반응 네이티브 양식 유효성 검사에서 함수 구성 요소에서 프로그래밍 방식으로 텍스트의 텍스트를 설정하는 방법은 무엇입니까?
- reactjs - 반응 네이티브의 부울 textInput
- ios - SwiftUI에서 React Native 자산의 글꼴 사용
- reactjs - React Native 및 Redux와 함께 Cloud Firestore를 사용하는 방법은 무엇입니까?
- reactjs - 하위 메뉴로 네이티브 하단 서랍 탐색에 반응합니까?
- reactjs - React Native Axios-> 비동기 응답을 기다리고 true 인 경우 새 페이지로 이동
- 반응 네이티브에 생성자를 추가하고 있지만 오류가 표시됩니다
- jestjs - React Native에서 농담 테스트를 수행하는 방법은 무엇입니까?
- ios - 네이티브 반응 - module appregistry는 등록 된 호출 가능 모듈이 아닙니다 (runapplication 호출)
관련 질문
- javascript : 사용자가 하단에 도달했을 때 FlatList 상단의 플로팅 버튼을 숨기는 방법은 무엇입니까?
- 네이티브 동적 FlatList에 반응
- React 기본 플랫리스트가 사용자 정의 하단 시트 내에서 스크롤되지 않음
- reactjs : Flatlist는 기본 반응의 모든 항목을 나열하지 않습니까?
- reactjs : React Native의 플랫리스트 내에서 터치 가능한 불투명도 내에서 함수를 어떻게 실행합니까?
- React Native Flatlist에서 첫 번째 열을 어떻게 고정시킬 수 있습니까?
- React Navigation을 사용할 때 React Native Web에서 FlatList 및 ScrollView가 스크롤되지 않음
- firebase : React Native 다른 컬렉션에서 데이터를 가져오는 방법 firestore Flatist
- 다른 페이지에서 탐색하는 동안 React Native Flatlist에서 맨 위로 스크롤하는 방법은 무엇입니까?
- VirtualizedList: React Native를 업데이트하는 데 느린 큰 목록이 있습니다.
ItemSeparatorComponent
를 사용할 수 있습니다FlstList
의 재산따라서 separtor view를 반환하는 하나의 함수를 만듭니다 :
이제 pyzwyz에서이 방법을 사용하십시오.이렇게하면 가로 구분선보기가 만들어집니다.
수직 구분 기호보기 스타일 변경 :