rearct native react-navigation　個人的メモ

![alt](https://user-images.githubusercontent.com/26253721/39765058-e8d0eae4-531b-11e8-9305-4c852f269517.png)
2019年のreact-nativeではナビゲーションライブラリは、一択だ。
1. reaact-navigation 大規模向け、reduxと相性がいい。

react-native-router-fluxや、react-native-navigationといったライブラリもあるが滅んでしまった。
material desingnなどにも対応していて何より情報が多いので、react-navigationを画面遷移のライブラリとして採用しよう。(Expo組み込みライブラリはreact navigation)

それではreact navigationを使ってみよう。

## 注意
version3になり、挙動が変わりこの記事のコードは動きません。

```js
npm install --save react-navigation
```
を実行し、react-navigationをインストール
react-navigatorでナビゲーション（画面の切り替え）をするにはnavigatorを作る必要がある。

StackNavigator、　通常の画面遷移
TabNabigator、　タブでの画面遷移
DrawerNavigator　ドロワーによる画面遷移
という三種の機能がある。

画面遷移の仕組み
全てのコンポーネントに navigationというpropsが渡される。
navigationのメソッドであるnavigateを呼び出す事により遷移する。
例えば、

```js
onPress={() => this.props.navigation.navigate("Home")}
```
でhomeコンポーネントに遷移する。
基本的にcontainerコンポーネントに遷移機能を定義し、子コンポーネントにpropsとして、定義した関数を渡す。
子で親のメソッドを使うと、子コンポーネントには、そもそも、this.props.navigationが存在しないため動作しない。

実務では使いやすいように、

```js
const {navigation} = this.props
const {navigate} = this.props.navigation
```
を書いておくと

```
onPress={() => navigation.navigate("Home")}
onPress={() => navigate("Home")}
```
とできる

## StackNavigatorを作る

```js
// Navigation.js
import { StackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen'

const RootNavigator = StackNavigator({
  HomeScreen
});

export default RootNavigator;
```
次にnavigatorにスクリーンを追加します。それぞれの鍵が画面に対応します。
画面を変数で宣言し、作成します。
RootNavigatorの中で、鍵と画面を対応させましょう。

We can then add screens to this StackNavigator. Each key represents a screen.

```js

import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';

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

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

const RootNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Details: {
    screen: DetailsScreen,
  },
});

export default RootNavigator;
```
それではRootnavigatorの中にタイトルを追加してみましょう

```js

const RootNavigator = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      headerTitle: 'Home',
    },
  },
  Details: {
    screen: DetailsScreen,
    navigationOptions: {
      headerTitle: 'Details',
    },
  },
});

export default RootNavigator;
```
最後にホームスクリーンから詳細ページへと飛べるボタンを追加します。これでナビゲーションは完了です。


```js
import { View, Text, Button } from 'react-native';

const HomeScreen = ({ navigation }) => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text>Home Screen</Text>
    <Button
      onPress={() => navigation.navigate('Details')}
      title="Go to details"
    />
  </View>
);
```
TabNavigatorを作る
navigatorを作りましょう。

```js
import { TabNavigator } from 'react-navigation';

const RootTabs = TabNavigator({

});

export default RootTabs;
```
画面を変数で宣言し、作成します。
navigatorの中で、鍵と画面を対応させます。

```js

import React from 'react';
import { View, Text } from 'react-native';
import { TabNavigator } 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 RootTabs = TabNavigator({
  Home: {
    screen: HomeScreen,
  },
  Profile: {
    screen: ProfileScreen,
  },
});

export default RootTabs;
```
それではRootNavigatorの中にタイトルを追加してみましょう。

```js
const RootNavigator = StackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      headerTitle: 'Home',
    },
  },
  Details: {
    screen: DetailsScreen,
    navigationOptions: {
      headerTitle: 'Details',
    },
  },
});

export default RootNavigator;
```

ラベルとアイコンをtabbarにつけましょう。

ここではreact-native-vector-iconsを使います。
この章を始める前にreact-native-vector-iconsをあなたのプロジェクトの中にインストールしてください。

```js

import Ionicons from 'react-native-vector-icons/Ionicons';

...

const RootTabs = TabNavigator({
  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;

```
それではアイコンをタブバーにセットしましょう。このアイコンはiosでしか見ることができないので注意です。（私はできなかった）

DrawerNavigationを作る
navigatorを作りましょう

タブをタップした時に、各タブの初期画面に戻りたい時は、
navigationOptionに
resetOnBlur: true
を加えておきましょう。(詳細はググってねw)


```js
import { DrawerNavigator } from 'react-navigation';

const RootDrawer = DrawerNavigator({

});
```
これまでと同じです。

```jsx
import React from 'react'
import { View, Text } from 'react-native'
import { DrawerNavigator } 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 = DrawerNavigator({
  Home: {
    screen: HomeScreen,
  },
  Profile: {
    screen: ProfileScreen,
  },
})

export default RootDrawer

```

スワイプすると左から出てくるはずです。