카카오톡 클론코딩 My Profile 만들기

<개요>

Myprofile 용 모듈을 새로 만들어서 내용을 적은 뒤 import 

그림과 글들 사이에는 flex-direction row를 횡으로 가도록 

글 끼리는 열로 가도록 설정,

Margin을 주는 모듈을 만들어서 상태바, 프로필, 또 프로필 내용들 사이에 margin 주기 

Margin Module을 쓰는 이유는 해당 Margin을 줘야하는 경우가 많을 것 이기 때문에 

계속 <View/> 로 주는 것보다 이를 위한 컴포넌트를 하나 만드는 게 낫다. 

 

0. iphone-x-helper는 이제 서비스를 종료함. 

이것을 대체하는 git-hub 내용 

GitHub - th3rdwave/react-native-safe-area-context: A flexible way to handle safe area insets in JS. Also works on Android and Web!

GitHub - th3rdwave/react-native-safe-area-context: A flexible way to handle safe area insets in JS. Also works on Android and We

(1) 사용 전 설치 필요

(2) 사전 준비 

import { SafeAreaProvider } from 'react-native-safe-area-context';

function App() {
  return <SafeAreaProvider>...</SafeAreaProvider>;
}

import 및 사용 전에 return 내용을 전부 <safeAreaProvider로 감싸야 함.>

 

(3) 쓰는 방법

    
return (
    <SafeAreaProvider>
    <SafeAreaView edges={['right', 'left']} style={styles.container}>
    <Header />
    </SafeAreaView>
    </SafeAreaProvider>
    )

View는 SafeAreaView로 바꿔 사용 해야함. 그러면 자동으로 안전 영역에서 처리 된다. 

여기서 쓸 수 있는 속성은 edge로 

edge로 top , bottom, right, left를 주면 해당 영역에서만 안전 영역 안 쪽으로 쓰인다. 

위 예시는 top, bottom을 뺐으므로, 앱 내용이 핸드폰의 배터리 잔량 표시나 홈 버튼 부분과 겹칠 것이다. 

 

(4) flex:1 가 무엇인가?

a. flex의 속성

 - flex basis

: 해당 flex item의 고정 크기를 정하는 것. flex-direction이 row면 너비, column이면 높이를 의미함. 

   default 값은 auto로 원래 가진 크기 대로 가는 것. 

   px, rem, em, % 등으로 설정 가능 

 

- flex-grow

: 부모 요소의 공간 중 여백을 얼마나 차지할 것인가 

  값이 0이면 여백 차지 하기 위해 커지지 않고, basis의 고정 너비 이용하겠다.

  값이 1 이상이면, basis보다 커질 용이가 있고, 형제들과 경쟁하겠다. 

  형제들의 flex grow의 값과의 상대 비율 차이로 커지는 정도가 결정된다. 

   예를 들어 div1 의 grow가 1이고, div2의 grow가 3이면, div 1이 전체의 25% 차지, div2는 전체의 75% 차지 하겠다는 뜻이다. 

 

- flex-shrink 

: 자신과 형제들의 고정너비 값이 부모 요소의 크기를 넘었을 때는 서로 크기를 줄여서 그 안으로 들어와야 한다.

  shrink는 얼마나 줄어들 것인지 이다. 

  많은 면에서 grow와 성질이 같다. 값이 0이면 안 줄어들고, 부모 요소 밖으로 튀어나와서 basis 고정너비 고수하겠다.

  1 이상이면, 형제들과의 비율 차이로 줄어듦, 1보다 클수록 많이 줄어듦

 

- flex: 1 

은 다음과 같다. flex-basis: 0%, flex shrink: 1 , flex-grow: 1 

이것의 의미는 고정 너비 없이 화면 비율에 따라 늘어나고 줄어들겠다는 뜻이다.

 

2. 코드 리뷰 

/*MyProfile.js 안*/

import { View, Image, Text } from "react-native"
import Margin from "./Margin"

export default (props) => {
  return (
    <View style={{flexDirection: "row"}}>
      

      <Image source={{uri: props.uri}} style={{width: 50, height: 50, borderRadius: 20}}/>


      <View style={{justifyContent: "center", marginLeft: 10 }}>

        <Text style= {{fontWeight: "bold", fontSize: 16}}>{props.name}</Text>
        <Margin height= {1}/>
        <Text style = {{fontSize: 12, color: "grey"}}>{props.introduction}</Text>
      </View>
    </View>
  )
}

/*App.js 안  -myprofile이라는 모듈을 data.js 안에 만들어서 임의 데이터들을 전부 담아 놓았다.*/
export default function App() {
  return (
    <View style={styles.container}>
      <Header />
      <Margin height = {10}/>
      <MyProfile
        uri={myProfile.uri}
        name={myProfile.name}
        introduction={myProfile.introduction}
      
      />
    </View>

  );
}

3. 스스로 해보기  

import { Image, Text, View, StyleSheet } from "react-native"

export default (props) => {
  return (
    <View style={styles.container}>
      <Image source={{uri: props.uri}} style={styles.image} />
      <View>
        <Text style={styles.text}>안녕하세요!</Text>
        <Text style={styles.text}> "{props.name}" 경관님!</Text>
      </View>
    </View>
  )

}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
  },
  image: {
    width: 100,
    height: 50,
    borderRadius: 20,
    borderWidth: 2,
    borderColor: "black"
  },
  text: {
    marginLeft: 5,
    paddingTop: 2,
    fontSize: 15,
  }
})