NativeBase

2020-12-16 hit count image

기본 Component UI에 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

사용법

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

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

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

...
import { ActionSheet } from 'native-base';
...

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

참고

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

책 홍보

스무디 한 잔 마시며 끝내는 React Native 책을 출판한지 벌써 2년이 다되었네요.
이번에도 좋은 기회가 있어서 스무디 한 잔 마시며 끝내는 리액트 + TDD 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
Posts