reactnative

rearct native react-navigation 個人的メモ

alt
2018年のreact-nativeでは二つのナビゲーションライブラリが主流だ。
1. reaact-navigation 大規模向け、reduxと相性がいい。
2. react-native-router-flux(RNRF)  お手軽、小規模向け。
どちらも優秀なライブラリだが、RNRFは公式ドキュメントが貧弱だ。
こだわりがない人は公式おすすめのreact navigationを使うと幸せになれる。
小規模ならRNRFがかなりおすすめだが。

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

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

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

画面遷移の仕組み
全てのコンポーネントに navigationというpropsが渡される。
navigationのメソッドであるnavigateを呼び出す事により遷移する。
例えば、
onPress={this.props.navigation.navigate("Home")}
でhomeコンポーネントに遷移する。
基本的に親コンポーネントに遷移機能を定義し、子コンポーネントにその関数を渡す。
子で上のメソッドを使うとうまくいかない。

実務では使いやすいように、
{navigation} = this.props
{navigate} = this.props.navigation
を書いておくと
onPress={() => navigation.navigate("Home")}
onPress={() => navigate("Home")}
とできる

StackNavigatorを作る

import { StackNavigator } from 'react-navigation';

const RootNavigator = StackNavigator({

});

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 = StackNavigator({
  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;

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

When you register a component with a navigator that component will then have a navigation prop added to it. This navigation prop drives how we use move between different screens.
To move from the home screen to the details screen we'll want to use navigation.navigate, like so:

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

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,
  },
});

スワイプすると左から出てくるはずです。
import { Button } from 'react-native';を忘れないでください

export default RootDrawer
export default RootDrawer;