NativeBase

2019-05-03

基本Component UIでNativeBaseライブラリを使って見ましょう。

概要

RNプロジェクトへmaterial ui componentsであるNativeBaseを適用して見ましょう。

ライブラリインストール

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

npm install native-base --save

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

react-native link native-base

使い方

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

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

ActionSheet

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

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を表示する部分へ下記のようにコーディングします。

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

参考

Buy me a coffeeBuy me a coffee
Posts