NativeBase

개요

RN 프로젝트에 material ui components인 NativeBase를 적용해 보자.

라이브러리 설치

아래에 명령어로 NativeBase를 설치합니다.

npm install native-base --save

설치가 완료되면 아래에 명령어로 NativeBase와 프로젝트를 연결합니다.

0.60 이상

cd ios
pod install
cd ..

0.59 이하

react-native link native-base

사용법

우리는 기본적으로 사용한적이 있는 경우만 블로그로 작성합니다. 따라서 여기에 작성된 내용은 우리가 사용할 때마다 추가될 것입니다.

사용법에 대한 자세한 사항은 공식 홈페이지를 참조하세요.

공식 사이트: NativeBase

ActionSheet

ActionSheet를 사용하기 위해서는 프로젝트 전체를 NativeBase의 <Root> 컴포넌트로 감싸줘야 합니다.

Functional Components - Root

import React from 'react';
import { Root } from 'native-base';
import { ThemeProvider } from 'styled-components';

import Theme from './Theme';

import Navigator from './Screen/Navigator';

interface Props {}
interface State {}

const App = ({}: Props) => {
  return (
    <Root>
    <ThemeProvider theme={Theme}>
        <Navigator />
    </ThemeProvider>
    </Root>
  );
};

export default App;

Class Components - Root

import * as React from 'react';
import { Root } from 'native-base';
import { ThemeProvider } from 'styled-components';

import Theme from './Theme';

import Navigator from './Screen/Navigator';

interface Props {}
interface State {}

export default class App extends React.Component<Props, State> {
  render() {
    return (
      <Root>
        <ThemeProvider theme={Theme}>
          <Navigator />
        </ThemeProvider>
      </Root>
    );
  }
}

ActionSheet를 표시하고 싶은 부분에 아래와 같이 코딩합니다.

Functional Components - ActionSheet

...
import { ActionSheet } from 'native-base';
...
    const ActionButtons = ['English', '日本語', '한국어', 'Cancel'];

    const cancelButtonIndex = ActionButtons.length - 1;

    return (
      <Container>
          <Button
            onPress={() =>
              ActionSheet.show(
                {
                  options: ActionButtons,
                  cancelButtonIndex: cancelButtonIndex,
                  destructiveButtonIndex: cancelButtonIndex,
                },
                (buttonIndex: number) => {
                  alert(buttonIndex);
                }
              )
            }>
            Test
          </Button>
      </Container>
    );
};

Class Components - ActionSheet

npm install native-base --save

options: string 타입으로 된 리스트(string[])나 아이콘을 포함한 리스트(Array<{ text: string, icon?: string, iconColor?: string }>) 형식을 지원합니다.
cancelButtonIndex: 취소 버튼의 위치입니다.
destructiveButtonIndex: 삭제 버튼의 위치입니다.(빨간색 글자 버튼을 표시하고 싶은 위치입니다.)
title: ActionSheet의 제목입니다.
(buttonIndex: number) => { alert(buttonIndex); }: 선택된 버튼의 index를 넘겨줍니다.