[react-native] NativeBase 설치 및 처음 시작하기

 

 

개인 프로젝트로 작업 중인데 아무래도 혼자 하다보니 화면 설계하는 데에 시간이 많이 걸릴 것 같아서 

디자인 라이브러리를 찾다가 NativeBase가 괜찮은 것 같아서 도입하기로 했다.

그런데 이런 라이브러리를 나 스스로 적용했던 적이 없어서(응애 나 초보)

설치부터 기본 코드 작성하는 데에 애를 많이 먹었고 하루하루 삽질의 연속이었다ㅠㅠ

그래서 NativeBase를 사용하고자 하려는 다른 분들에게 저같이 삽질하지 마시었으면 하는 마음에

(여러분들의 시간은 소중해용)

조금이나마 도움이 될까 싶어서 처음 설치방법과 시작하는 과정을 적어본다.

 

 

 

모든 라이브러리는 그들만의 조립설명서(?)가 있는데 개발하는 사람들은 이걸 Docs(독스, 공식문서)라고 부른다.

사용하기 전에 조립설명서를 보면서 '아 이건 이런 기능이 있군! 저런 기능도 있네? 이건 이렇게 쓰는거네?'라는 것을 알아야 라이브러리가 가지고 있는 기능들이 잘 구현이 될 것이다. 

(아는데 잘 안됨....하)

 

NativeBase 조립설명서(공식문서)

: https://docs.nativebase.io/?utm_source=HomePage&utm_medium=header&utm_campaign=NativeBase_3 

Getting Started | NativeBase | Universal Components for React and React Native

 

 

 

Step 1: 시작하기

---

1. 기본 install하기

NativeBase는 어떤 프로젝트냐에 따라 설치해야 하는 게 조금씩 다르다. 나는 엑스포로 진행하고 있기 때문에 여기에선 엑스포를 기준으로 설명한다.

 

 

1) 새로운 프로젝트를 시작하는 경우

- Javascript

expo init my-app --template @native-base/expo-template

 

- Typescript

expo init my-app --template @native-base/expo-template-typescript

 

 

2) 기존 Expo 프로젝트가 있는 경우

- yarn

1) yarn add native-base
2) expo install react-native-svg
3) expo install react-native-safe-area-context

 

- npm

1) npm install native-base
2) expo install react-native-svg
3) expo install react-native-safe-area-context

 

 

 

 

2. Setup NativeBase Provider

기본 설치를 했으면 NativeBase Provider를 설정해줘야 하는데 페이지의 가장 위쪽 import하는 공간에 아래처럼 native-base를 import시켜준다.

import { NativeBaseProvider, Text, Box } from 'native-base';

 

import React from 'react';
// 1. import `NativeBaseProvider` component
import { NativeBaseProvider, Text, Box } from 'native-base';

export default function App() {
  // 2. Use at the root of your app
  return (
    <NativeBaseProvider>
      <Box flex={1} bg="#fff" alignItems="center" justifyContent="center">
        <Text>Open up App.js to start working on your app!</Text>
      </Box>
    </NativeBaseProvider>
  );
}

새로운 프로젝트를 시작하는 경우로 설치했다면 위처럼 App.js에 <NativeBaseProvider>라는 태그가 설정이 되어 있을 것이고,

기존 프로젝트에서 설치했다면 굳이 App.js를 저렇게 변경시킬 필요는 없고, 위의 형식처럼 사용할 페이지의 return 안에 <NativeBaseProvider>태그로 감싸서 사용하면 된다.

 

 

 

 

 

3. Nativebase Icons 설치

NativeBase에서 제공하는 Icon들을 사용하기 위해 아래와 같이 설치한다.

yarn add @native-base/icons

 

Expo 프로젝트는 babel.config.js 파일을 아래처럼 수정해 준다.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          alias: {
            "@native-base/icons": "@native-base/icons/lib",
          },
        },
      ],
    ],
  };
};

alias 부분만 추가하면 되는데 나는 그냥 통째로 복사해서 갖다가 붙였다. 그게 마음 편함 ㅠㅠ

 

 

 

 

 

여기까지 하면 NativeBase에서 요구하는 기본 설정은 끝나고 실제 사용할 일만 남았다.

나는 isntall했는데도 뭔가 안 되서 구글링을 얼마나 했는지..ㅠㅠㅠ 삽질의 기억

 

 

 

 

 

 

 

 

Step 2: 기본 코드

---

1. 코드 설명

Main.js

 

 

 

2. 전체 코드

Main.js

import React from "react";
import {
  NativeBaseProvider,
  Box,
  Center,
  VStack,
  Heading,
  Button,
  View,
  Text,
} from "native-base";

export default function Index({ navigation }) {
  navigation.setOptions({
    headerShown: false,
  });

  return (
    <NativeBaseProvider>
      <Box>
        <Example />
        <ButtonEx />
      </Box>
    </NativeBaseProvider>
  );
}

function Example() {
  return (
    <Box>
      <View>
        <Heading color="emerald.400" mt="20">
          지역<Heading>{""}을 선택하세요</Heading>
        </Heading>
      </View>
      <VStack space={1} alignItems="center">
        <Text fontSize="2xl">This is a Text</Text>
        <Text fontSize="4xl">This is a Text</Text>
        <Text fontSize="6xl">This is a Text</Text>
        <Center
          mt="10"
          p="2"
          alignSelf="center"
          bg="primary.500"
          _text={{
            fontSize: "md",
            fontWeight: "medium",
            color: "warmGray.50",
            letterSpacing: "lg",
          }}
          h="300"
          w="300"
          shadow={2}
        >
          This is a Box
        </Center>
      </VStack>
    </Box>
  );
}

function ButtonEx() {
  return (
    <Button _pressed={{ bg: "red.500" }} mt="10" mx="50">
      Press Here!!
    </Button>
  );
}

 

 

3. 구현 화면

 

 

 

 

 

 

여기까지 기본 install과 기본 코드를 알아냈고(?) 

이제 공식문서를 보면서 하나하나 테스트 해 보면서 내 프로젝트에 맞는 기능을 구현해야겠다.

 

코딩 고수분들 블로그 가보면 맨날 공식문서를 참고해라, 공식문서에 다 나온다 그러시던데....

나오긴 하지..! ㅠㅠ 다 나오긴 하는데 문제는 내꺼에 적용을 어떻게 시키는지를 모르겠다거.....!!ㅠ

(초보분들 다 같은 마음이시져!? 저만 그런거 아니져?!?!)

 

로그인 화면 만들려다가 NativeBase 삽질에 일주일 소비 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

아 이제 진짜 로그인화면 만들어야지