Navigatorを用いた画面遷移UIの作成

# はじめに
新卒エンジニア2ヶ月目。
Webやネイティブに関する知識は全く無かったのでいろんなものを参考に自分でも作ってみる。

画面遷移がどうなっているか勉強したかったのでこの記事<https://qiita.com/loverails/items/46cb5fa3baa64c9fd9fd>を参考にして自分でも作ってみた。

# コードについて
Githubにも上げてある<https://github.com/Ikeponias/react-native-navigation-sample>。
遷移のために`npm install --save react-navigation`する必要がある。
また、iconがタブ遷移で使用されるため`npm install -save react-native-vector-icons`する必要がある。

## RootNavigator.js
``` navigator/RootNavigator.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createStackNavigator } from 'react-navigation';

const HomeScreen = ({ navigation }) => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
            onPress={() => navigation.navigate('Profile')}
            title="Go to Profile"
        />
    </View>
);

const ProfileScreen = () => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Profile Screen</Text>
    </View>
)

const RootNavigator = createStackNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            headerTitle: 'Home',
        },
    },
    Profile: {
        screen: ProfileScreen,
        navigationOptions: {
            headerTitle: 'Profile',
        },
    },
});

export default RootNavigator;
```
HomeScreen上のボタンを押すとProfileScreenに遷移する。
↓が、
![スクリーンショット 2018-05-27 12.23.24.png](https://qiita-image-store.s3.amazonaws.com/0/212284/ce13493c-d5ff-6645-6b15-c2e5f5ec073b.png)
↓になる。
![スクリーンショット 2018-05-27 12.23.33.png](https://qiita-image-store.s3.amazonaws.com/0/212284/ede1022b-0d93-307d-f00d-5c19fe94f90a.png)


## RootTabs.js
``` navigator/RootTabs.js
import React from 'react';
import { View, Text } from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';

const HomeScreen = () => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
    </View>
);

const ProfileScreen = () => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Profile Screen</Text>
    </View>
);

const RootTabs = createBottomTabNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarLabel: 'Home',
            tabBarIcon: ({ tintColor, focused }) => (
                <Ionicons
                    name={ focused ? 'ios-home' : 'ios-home-outline' }
                    size={ 26 }
                    style={{ color: tintColor }}
                />
            ),
        },
    },
    Profile: {
        screen: ProfileScreen,
        navigationOptions: {
            tabBarLabel: 'Profile',
            tabBarIcon: ({ tintColor, focused }) => (
                <Ionicons
                    name={ focused ? 'ios-person' : 'ios-person-outline' }
                    size={ 26 }
                    style={{ color: tintColor }}
                />
            ),
        },
    },
});

export default RootTabs;
```
HomeScreen下部のタブをタップするとProfileScreenに遷移する。
下部のタブはそのまま残る。
↓が、
![スクリーンショット 2018-05-27 12.23.57.png](https://qiita-image-store.s3.amazonaws.com/0/212284/c980a215-0903-8040-a421-a2cdac515a0b.png)
↓になる。
![スクリーンショット 2018-05-27 12.24.07.png](https://qiita-image-store.s3.amazonaws.com/0/212284/a2c7443e-6a92-cb8b-e472-156bf29871d9.png)


## RootDrawer.js
``` navigator/RootDrawer.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import { createDrawerNavigator } from 'react-navigation';

const HomeScreen = () => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
    </View>
);

const ProfileScreen = () => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Profile Screen</Text>
    </View>
);

const RootDrawer = createDrawerNavigator(
    {
        Home: {
            screen: HomeScreen,
        },
        Profile: {
            screen: ProfileScreen,
        },
    },
);

export default RootDrawer;
```
左からフリックするとダッシュボード型(?)メニューが出る。
…がなかなか使いづらい。
頑張ってフリックすると↓が出る。
![スクリーンショット 2018-05-27 12.24.30.png](https://qiita-image-store.s3.amazonaws.com/0/212284/3ef0ec47-542b-3c1d-c0f3-7e31abd987a2.png)


## App.js
``` App.js
import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import RootNavigator from './navigator/RootNavigator';
import RootTabs from './navigator/RootTabs';
import RootDrawer from './navigator/RootDrawer';

export default class App extends React.Component {
  render() {
    return (
      <RootDrawer />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```

App.js内の`<RootDrawer />`を変えることで遷移方法を変えられる。

# まとめ
元記事との主な変更点は、各Navigatorがdeprecatedだったのでこの部分を`create~`にしたこと。
各遷移は以下の通り。

- RootNavigator: ボタンを押すと遷移する。
- RootTabs: 下段に表示されるタブを押すと遷移する。
- RootDrawer: 左からフリックするとメニューが出てきて、メニューを押すと遷移する。