NativeBaseでタブ表示やリスト表示を試して雰囲気を掴む

## NativeBaseとは?

ReactNative用のUIライブラリ

<a href="https://github.com/GeekyAnts/NativeBase"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/9b442b19-c3b5-f8b9-73b6-f7b970595cc6.png" width="460px"></a>

###  :computer:環境構築
****

yarnを使ってライブラリをインストール

```sh
$ yarn add native-base
```

### :pencil: 実装
****

試しに、リスト表示+クリックした箇所をログ表示するまでをやってみます。

#### リスト表示

```ts:App.tsx
import { Platform } from "react-native";
import {
  createAppContainer,
  createStackNavigator,
  NavigationContainer
} from "react-navigation";
import Home from "./screens/home";

const headerNavigationOptions = {
  headerStyle: {
    backgroundColor: "gray",
    marginTop: Platform.OS === "android" ? 24 : 0
  },
  headerTitleStyle: { color: "white" },
  headerTintColor: "white"
};

const AppNavigator: NavigationContainer = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      ...headerNavigationOptions,
      headerTitle: "サンプル"
    }
  }
});

export default createAppContainer(AppNavigator);
```
```ts:Home.tsx
import {
  Container,
  Content,
  List,
  ListItem,
  Text,
  Body,
  Right,
  Icon
} from "native-base";
import React from "react";

// tslint:disable-next-line: no-empty-interface
interface IProps {}
export default class Home extends React.Component<IProps> {
  public render() {
    // 表示するデータ
    const items: string[] = ["itemA", "itemB", "itemC"];
    return (
      <Container>
        <Content>
          <List
            dataArray={items}
            renderRow={item => (
              <ListItem
                button={true}
                onPress={() => console.log(`onPress ${item}`)}
              >
                <Body>
                  <Text>{item}</Text>
                </Body>
                <Right>
                  <Icon name="arrow-forward" />
                </Right>
              </ListItem>
            )}
          />
        </Content>
      </Container>
    );
  }
}
```
実行してiPhoneシュミレータで確認すると、以下の様な感じになりました :eyes:

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/2549353d-bd88-4efb-c2ea-169b1f0c7597.png" width=250px />

アイテムをクリックするとコンソールログに出力されます :sparkles: 

----
### クリップボードに長押ししたテキストを保存する

clipboard操作に関しては以下のモジュールを使用します。
<a href="https://github.com/react-native-community/react-native-clipboard"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/87959183-fc61-d1b5-67b8-a0f2c79fffe3.png" width="460px"></a>

ライブラリをインストール

```sh
$ yarn add @react-native-community/react-native-clipboard
```

```ts:clips.tsx
...
      <Container>
        <Content>
          <List
            dataArray={items}
            renderRow={item => (
              <ListItem
                button={true}
                onPress={() => console.log(`onPress ${item}`)}
                onLongPress={() => this.onLongClick(item)}
              >
                ...
            )}
          />
        </Content>
      </Container>
...

  private onLongClick(item: string) {
    Clipboard.setString(item);
    Alert.alert("information", `「${item}」をクリップボードにコピーしました。`);
  }
}
```

これで長押しするとクリップボードに選択した文字列が設定されるようになりました :tada:

---
### タブバーを下部に設置する

[Footer Tabs](https://docs.nativebase.io/Components.html#footer-tabs-def-headref)を使用する

- まずはサンプル通りに実装

```ts
export default class Home extends React.Component<IProps> {
  public render() {
    return (
      <Container>
        <Content />
        <Footer>
          <FooterTab>
            <Button vertical={true}>
              <Icon name="clipboard" />
              <Text>タブ1</Text>
            </Button>
            <Button vertical={true}>
              <Icon name="settings" />
              <Text>タブ2</Text>
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}
```

iOSシュミレータでの実行結果
<img width="250" alt="スクリーンショット 2019-05-27 8.09.19.png (511.8 kB)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/6ebe2d46-a3c1-138c-c6c5-699c80f40533.png">

表示だけは出来ました。:tada:
次はタブの切り替えや、現在表示されているタブが分かるようにしたいと思います。

```ts
import {
  Body,
  Button,
  Container,
  Content,
  Footer,
  FooterTab,
  Icon,
  Text
} from "native-base";
import React from "react";

import Tab1 from "./clips";
import Tab2 from "./settings";

interface IState {
  selectedTab: string;
}

// tslint:disable-next-line: no-empty-interface
interface IProps {}

export default class Home extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);

    this.state = {
      selectedTab: "clips"
    };
  }

  public renderSelectedTab() {
    switch (this.state.selectedTab) {
      case "clips":
        return <Tab1 />;
      case "settings":
        return <Tab2 />;
      default:
    }
  }

  public render() {
    return (
      <Container>
        <Content>{this.renderSelectedTab()}</Content>
        <Footer>
          <FooterTab>
            <Button
              vertical={true}
              active={this.state.selectedTab === "clips"}
              onPress={() => this.setState({ selectedTab: "clips" })}
            >
              <Icon name="clipboard" />
              <Text>タブ1</Text>
            </Button>
            <Button
              vertical={true}
              active={this.state.selectedTab === "settings"}
              onPress={() => this.setState({ selectedTab: "settings" })}
            >
              <Icon name="settings" />
              <Text>タブ2</Text>
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );
  }
}
```

`clips.tsx` と `settings.tsx` を別ページとして作成し、FooterTabの `Button` が
押された時に state でどのページを表示するか管理しています。

iOSシュミレータでの実行結果
<img width="250" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/2588ee10-1550-8cc1-0368-c34330a90905.png">

タブ切り替えもちゃんと出来てます :tada:
<img width="250" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/830fbaa1-cd53-b117-445b-32a48880e033.png">

----
### Androidの場合

上のコードをAndroidで動かすと以下のようになりました。

<img width="250" alt="7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/299271/242fbf58-32cb-6765-a16b-b25df8494046.png">

タブバーの色等細かい所は調整が必要そうです :eyes:

### :link: 参考URL
****

- [native-base-example-github-app](https://github.com/GeekyAnts/native-base-example-github-app)
- [【React Native】NativeBaseのListを使ってみる](https://qiita.com/keneo/items/8f47e0c6a2d8e3cb1c10)
- [Footer Tabs Question - How to make it work?](https://github.com/GeekyAnts/NativeBase/issues/245)