react-navigation

2019-10-03

react-navigationを使ってアプリを開発して見ましょう。

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

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

react-navigationインストール

react-navigation V4

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

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

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

react-navigation-stack

使えるナビゲーション

  • createStackNavigator
  • StackGestureContext
  • Transitioner
  • StackView
  • StackViewCard
  • StackViewTransitionConfigs
  • Header
  • HeaderTitle
  • HeaderBackButton
  • HeaderStyleInterpolator

インストールコマンド

npm install --save react-navigation-stack

react-navigation-tabs

使えるナビゲーション

  • createBottomTabNavigator
  • createMaterialTopTabNavigator
  • BottomTabBar
  • MaterialTopTabBar

インストールコマンド

npm install --save react-navigation-tabs

react-navigation-drawer

使えるナビゲーション

  • createDrawerNavigator
  • DrawerGestureContext
  • DrawerRouter
  • DrawerActions
  • DrawerView
  • DrawerNavigatorItems
  • DrawerSidebar

インストールコマンド

npm install --save react-navigation-drawer

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

cd ios
pod install
cd ...

react-navigation V3

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

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

このリポジトリ(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を非表示します。

参考

Buy me a coffeeBuy me a coffee
Posts