스파르타 코딩 클럽 🤟🏻 - 개발일지 2

과제 Github

라이브러리

import { Col, Row, Grid } from "react-native-easy-grid";
import { Dimensions } from "react-native";
import {
  Container,
  Content,
  Item,
  Input,
  Icon,
  List,
  Thumbnail,
  Card,
  CardItem,
  Icon,
} from "native-base";
import HeaderComponent from "../components/HeaderComponent";

함수

• CardComponent.jsx에서 DetailPage.jsx로 데이터 전달

CardComponent.jsx

<TouchableOpacity
  onPress={() => {
    navigation.navigate("DetailPage", { content: content });
  }}
  style={styles.container}>

DetailPage.jsx

useEffect(() => {
  navigation.setOptions({
    title: content.title,
    headerStyle: {
      backgroundColor: "white",
      shadowColor: "white",
    },
    headerTintColor: "black",
    headerShown: "true",
    headerBackTitleVisible: false,
  });
}, []);

디자인

ImageComponent.jsx

• 화면 가로 너비 3등분한 값

const imageWidth = Dimensions.get("window").width / 3;

• ImageBlurLoading을 사용하여 해당 값 적용

<ImageBlurLoading
  withIndicator
  thumbnailSource={{ uri: image }}
  source={{ uri: image }}
  style={{ width: imageWidth, height: imageWidth }}
/>

소감

리액트에 대해 감이 잡혀간다.
그래도 아직은 함수를 참고 없이 작성하기에 무리가 있을 것 같다 😅
확실이 네이티브 개발이 다양한 기능이 있는 기본 라이브러리를 제공하여 필요한 라이브러리를 일일이 다운받아야하는 하이브리드보다 더 편하고 쉬운 것 같다.
갈 길이 멀다~~