react-navigation

リアクトネイティブ(React Native)プロジェクト生成

typescriptとstyled-componentsを適用したプロジェクトで進めます。RNへtypescriptとstyled-componentsを適用する方法は以前のブログをご参考してください。

react-navigation ライブラリを下記のコマンドでインストールします。

npm install --save react-navigation react-native-gesture-handler react-native-reanimated react-native-screens

react-navigation V4からナビゲーションが細分化されました。下記のように使うナビゲーションによるライブラリを追加でインストールする必要があります。

使えるナビゲーション

createStackNavigator
StackGestureContext
Transitioner
StackView
StackViewCard
StackViewTransitionConfigs
Header
HeaderTitle
HeaderBackButton
HeaderStyleInterpolator

インストールコマンド

npm install --save react-navigation-stack

使えるナビゲーション

createBottomTabNavigator
createMaterialTopTabNavigator
BottomTabBar
MaterialTopTabBar

インストールコマンド

npm install --save react-navigation-tabs

使えるナビゲーション

createDrawerNavigator
DrawerGestureContext
DrawerRouter
DrawerActions
DrawerView
DrawerNavigatorItems
DrawerSidebar

インストールコマンド

npm install --save react-navigation-drawer

インストールが終わったら、iOSのモジュールを連動するため下記のコマンドを実行します。

cd ios
pod install
cd ...

react-navigationライブラリを下記のコマンドでインストールします。

npm install --save react-navigation react-native-gesture-handler
npm install --save-dev @types/react-navigation

react-native-gesture-handlerライブラリ連結

下記のコマンドでreact-native-gesture-handlerライブラリをリアクトネイティブ(React Native)プロジェクトへ連結します。

react-native link react-native-gesture-handler

使い方

react-navigationを使う色んな方法は公式サイトに詳しく載せております。詳しく内容はリンクを参考してください。

公式シアト: https://reactnavigation.org/docs

私たちは公式サイトを参考して基本的な使い方を纏めてリポジトリ(Repository)を作りました。react-navigationを使う前このリポジトリ(Repository)を確認すると基本的な構造を作る時、ご参考になると思います。

react-navigation-exercise V4: https://github.com/dev-yakuza/react-navigation-v4-exercise
react-navigation-exercise V3: https://github.com/dev-yakuza/react-navigation-exercise

このリポジトリ(Repository)に開発された内容を説明します。

使うナビゲーション

使うナビゲーション(Navigation)を追加(import)して使います。

V4

import {createSwitchNavigator, createAppContainer} from 'react-navigation';
import {
  createBottomTabNavigator,
  createMaterialTopTabNavigator,
} from 'react-navigation-tabs';
import {createStackNavigator} from 'react-navigation-stack';

V3

import {
  createSwitchNavigator,
  createBottomTabNavigator,
  createStackNavigator,
  createAppContainer,
} from 'react-navigation';

createAppContainer

アプリ(App)でreact-navigationを使うためにはcreateAppContainerをトップナビゲーション(Navigation)に使え必要があります。

createSwitchNavigator

アプリ(App)に基本的にログイン機能があったら、createSwitchNavigatorを使えことをおすすめします。私たちのリポジトリ(Repository)はSwitch Navigationを基本ナビゲーション(Navigaion)で使ってます。

export default createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading,
      Auth,
      MainNavi,
    },
    {
      initialRouteName: 'AuthLoading',
    }
  )
);

createStackNavigator

このcreateStackNavigatorはビュー(View)の上に別のビュー(View)を積む(Stack)ナビゲーション(Navigation)です。私たちはこのナビゲーション(Navigation)を使ってタブナビゲーション(Tab Navigation)上にフルスクリーンのビュー(View)を表示するとき、タブナビゲーション(Tab Navigation)中で別のビュー(View)を表示する時使います。

const MainNavi = createStackNavigator({
  MainTab: {
    screen: MainTab,
    navigationOptions: ({ navigation }) => ({
      header: null,
    }),
  },
  FullDetail,
});

createBottomTabNavigator

このcreateBottomTabNavigatorを使って下にタブナビゲーション(Tab Navigation)を表示します。

const MainTab = createBottomTabNavigator({
  FirstTabStack,
  SecondTab,
  ThirdTab,
});

ナビゲーション転換

ビュー(View)から別のビュー(View)に切り替える時、下記のコードを使います。

this.props.navigation.navigate('MainTab');

下記のコードでnavigation barを隠せます。

...
export default class Home extends React.Component<Props, State> {
  static navigationOptions = { header: null };

  render() {
    return (
      <Container>
        <StyledText>Home screen!</StyledText>
      </Container>
    );
  }
}
...

static navigationOptions: Navigationのオプションを設定します。
{ header: null }: navigation header barを非表示します。