NativeBase

概要

リアクトネイティブ(React Native)プロジェクトへmaterial ui componentsであるNativeBaseを適用して見ましょう。

ライブラリインストール

下記のコマンドでNativeBaseをインストールします。

npm install native-base --save

インストールが終わったら、下記のコマンドで、ライブラいとプロジェクトをリンクします。

0.60 以上

cd ios
pod install
cd ..

0.59 以下

react-native link native-base

使い方

私たちは基本的使ったことがある場合、ブログを作成します。したがってここには私たちが実際使って分かった内容を追加する予定です。

使い方を詳しく知りたい方は公式サイトを見てください。

公式サイト: NativeBase

ActionSheet

ActionSheetを使うためにはプロジェクト全体をNativeBaseの<Root> component中に入れる必要があります。

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を貰えます。