RN Prj - borderRadius, FlatList, SafeAreaView

부동산 등기 두번째 탭 Check List UI 구성 진행

 

- FlatList

매도인 / 매수인 의 등기 Check List 를 List로 보여주려면 ScrollView 와 FlatList 정도 쓰면 될 것 같은데

아래 내용을 보면, ScrollView는 all rendering 인데 반해

flatlist 는 default 10개씩 mount  하기 때문에

memory 및 processing time 을 줄일수 있다고 합니다.

(사실 수백개 list 가 넘어가야지 flatList 가 유용 하다고 함)

Flat List 예제 코드는 아래 활용.

https://reactnative.dev/docs/flatlist

React Native · A framework for building native apps using React

- FlatList Style 적용하기

list 별 view 들을 center 에 두려면,

item: alignItems 와 justifyContent 를 set 해야합니다.

그리고, text 를 center 에 두려면 checklist : textAlign set.

- SafeAreaView 안에 FlatList 를 넣으면 자동으로 padding 적용, 잘림 방지 등이 적용됩니다.

반드시 style 에 flex : 1 을 줘야 함

 

- borderRadius : view round corner 적용

style 에     borderWidth: 5, borderTopLeftRadius: 20, borderTopRightRadius: 20, 등의 값을 주면 되고,

borderWidth 는 layout 선 두께를 의미.

상하좌우 모든 방면에 주려면 아래와 같이 borderRadius: 를 주면됩니다.

https://reactnative.dev/docs/view-style-props#borderbottomendradius

React Native · A framework for building native apps using React

 

 

완성된 Check List Layout

 

 

import * as React from 'react';
import { SafeAreaView, TouchableOpacity, View, FlatList, StyleSheet, Text, Alert } from 'react-native';

import { createStackNavigator } from '@react-navigation/stack';

const DATA_BUYER = [
  {
    id: 'aa',    title: '도장\n신분증\n주민등록등본',
  },
  {
    id: 'bb',    title: '소유권이전\n등기신청서 2매\n위임장 2매',
  },
  {
    id: 'cc',    title: '토지대장\n(대지권등록부)',
  },
  {
    id: 'dd',    title: '건축물대장\n(전유부 포함)',
  },
  {
    id: 'ee',    title: '채권매입\n영수증',
  },
  {
    id: 'ff',    title: '수입인지',
  },
  {
    id: 'gg',    title: '등기신청\n수수료 영수증',
  },
  {
    id: 'hh',    title: '취득세\n영수증',
  },
];

const DATA_SELLER = [
  {
    id: 'aaa',    title: '매도인\n등기필증 \n= 등기권리증\n= 등기필정보',
  },
  {
    id: 'bbb',    title: '매도인\n인감증명서',
  },
  {
    id: 'ccc',    title: '매도인\n주민등록초본',
  },
  {
    id: 'ddd',    title: '매도인\n소유권이전등기 및\n위임장 날인',
  },
  {
    id: 'eee',    title: '중개사\n매매계약서 및 \n사본1매',
  },
  {
    id: 'fff',    title: '중개사\n부동산\n신고거래필증',
  },
];

function Item({ id, title, selected, onSelect }) {
  return (
    <TouchableOpacity
      onPress={() => Alert.alert(
        'Alert Title',
        'My Alert Msg',
        [
          { text: 'Cancel', style: 'cancel'},
          { text: 'OK', onPress: () => onSelect(id)}
        ],
        { cancelable: false }
      )}

      style={[
        styles.item,
        { backgroundColor: selected ? '#534B40' : '#EBDFC9' },
      ]}
    >
      <Text style={styles.checklist}>{title}</Text>
    </TouchableOpacity>
  );
};

function CheckListScreen() {
  const [selected, setSelected] = React.useState(new Map());

  const onSelectBuyer = React.useCallback(
    id => {
      const newSelected = new Map(selected);
      newSelected.set(id, !selected.get(id));

      setSelected(newSelected);
    },
    [selected],
  );

  const onSelectSeller = React.useCallback(
    id => {
      const newSelected = new Map(selected);
      newSelected.set(id, !selected.get(id));

      setSelected(newSelected);
    },
    [selected],
  );

  const onEndReached = () => {
    this.setState();
  }

  return (
    <SafeAreaView style={styles.safearea}>
      <View>
        <Text style={styles.title}>매수인 체크리스트</Text>
      </View>
      <FlatList
        data={DATA_BUYER}
        renderItem={({ item }) => (
          <Item
            id={item.id}
            title={item.title}
            selected={!!selected.get(item.id)}
            onSelect={onSelectBuyer}
          />
        )}
        keyExtractor={item => item.id}
        extraData={selected}
        horizontal={true}
      />
      <View>
        <Text style={styles.title}>매도인 체크리스트</Text>
      </View>
      <FlatList
        data={DATA_SELLER}
        renderItem={({ item }) => (
          <Item
            id={item.id}
            title={item.title}
            selected={!!selected.get(item.id)}
            onSelect={onSelectSeller}
          />
        )}
        keyExtractor={item => item.id}
        extraData={selected}
        horizontal={true}
        // onEndReached={this.onEndReached}  
      />
    </SafeAreaView>
  );
};

const CheckListStack = createStackNavigator();

export default function CheckListTab() {
  return (
    <CheckListStack.Navigator>
      <CheckListStack.Screen name="CheckList" component={CheckListScreen} />
      {/* <CheckListStack.Screen name="Details" component={DetailsScreen} /> */}
    </CheckListStack.Navigator>
  );
};

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    safearea: {
      flex: 1,
    },
    item: {
      borderRadius:20,
      backgroundColor: '#EBDFC9',
      padding: 10,
      width:200,
      height:200,
      marginVertical: 32,
      marginHorizontal: 32,
      alignItems: 'center',
      justifyContent: 'center',
    },
    title: {
      fontSize: 28,
      marginHorizontal:16,
      marginTop:16,
    },
    checklist: {
      fontSize: 24,
      textAlign:'center',
    },
});