React Navigationで画面遷移(stack,tab,drawer)

React Navigationを利用して画面遷移を実装してみます。また createStackNavigator createBottomTabNavigator createDrawerNavigator によって生成された処理の動作確認をします。

インストール

yarn add react-navigation

インストールできました。

$ yarn list|grep react-navigation@
├─ react-navigation@3.11.1

今回、Expoを利用しているので下記ライブラリも追加インストールします。

yarn add react-native-gesture-handler react-native-reanimated

StackNavigatorの実装
( createStackNavigator )

参考ドキュメント

下記ページを参考に StackNavigator を実装して動作確認をします。

コード

以下処理を記述してます。

├── screens
│   ├── DetailsScreen.js
│   └── HomeScreen.js
└── App.js

screens/DetailsScreen.js

import React from 'react'
import { Button, View, Text } from 'react-native'

export default DetailsScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="navigation.push('Details')"
        onPress={() => navigation.push('Details')}
      />
      <Button
        title="navigation.navigate('Home')"
        onPress={() => navigation.navigate('Home')}
      />
      <Button
        title="navigation.goBack()"
        onPress={() => navigation.goBack()}
      />
    </View>
  )
}

screens/HomeScreen.js

import React from 'react'
import { Button, View, Text } from 'react-native'

export default HomeScreen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  )
}

App.js

import React from 'react'
import { createStackNavigator, createAppContainer } from 'react-navigation'
import DetailsScreen from './screens/DetailsScreen'
import HomeScreen from './screens/HomeScreen'

const AppNavigator = createStackNavigator(
  {
    Home: { screen: HomeScreen },
    Details: { screen: DetailsScreen }
  },
  {
    initialRouteName: 'Home'
  }
)

export default createAppContainer(AppNavigator)

createStackNavigator関数を利用して、HomeルートDetailsルート を持つ StackNavigator を生成してます。

Screen Component には props経由navigation が自動的に提供されます。このオブジェクトを利用して画面遷移を実装してます。

動作確認

706-react-native-navigation-stack.gif

StackNavigator は、スクリーンが重なるように表示されます。navigation.push によって スタックスクリーン が積まれていることがわかります。

ナビゲーションの種類

https://github.com/react-navigation/react-navigation/tree/master/examples/NavigationPlayground にてサンプルソースが掲載されています。

createBottomTabNavigatorcreateDrawerNavigator について動作確認してみます。

createBottomTabNavigator

706-react-native-navigation_tab.gif

画面下部にタブメニューが表示されてます。

関連リンク
https://reactnavigation.org/docs/en/tab-based-navigation.html

createDrawerNavigator

706-react-native-navigation_drawer.gif

ドロワーメニューが表示されます。
(drawer = 引き出し)

関連リンク
https://reactnavigation.org/docs/en/drawer-based-navigation.html

参考