rearct native react-navigation 個人的メモ

2019年のreact-nativeではナビゲーションライブラリは、一択だ。

1. reaact-navigation 大規模向け、reduxと相性がいい。

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

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

注意

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

npm install --save react-navigation

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

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

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

onPress={() => this.props.navigation.navigate("Home")}

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

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

const {navigation} = this.props
const {navigate} = this.props.navigation

を書いておくと

onPress={() => navigation.navigate("Home")}
onPress={() => navigate("Home")}

とできる

StackNavigatorを作る

// 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.

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の中にタイトルを追加してみましょう

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

export default RootNavigator;

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

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を作りましょう。

import { TabNavigator } from 'react-navigation';

const RootTabs = TabNavigator({

});

export default RootTabs;

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

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の中にタイトルを追加してみましょう。

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をあなたのプロジェクトの中にインストールしてください。

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)

import { DrawerNavigator } from 'react-navigation';

const RootDrawer = DrawerNavigator({

});

これまでと同じです。

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

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