I. はじめに
React Navigationは、React Nativeで現在最も主流の画面切り替えナビゲーション方式です。React Navigation 5.xバージョンは現在最新の安定版で、旧バージョンの設定に比べ、React Routerに近く、理解が深まります。reactNative0.60.0以上であれば設定の手間が省けるので、0.6以上のバージョンを使用することをお勧めします！npx react-native init demo --version 0.60.0 //バージョン番号は自分で決める
II.依存するインストール
// reactをインストールする-navigation
yarn add @react-navigation/native
// 依存ライブラリのインストール
yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
注: ネイティブライブラリのリンクReact Native 0.60以降は自動的にリンクされるため、0.60以上の場合はこの手順を省略できます。
react-native link react-native-reanimated
react-native link react-native-gesture-handler
react-native link react-native-screens
react-native link react-native-safe-area-context
StackNavigatorスタックナビゲーション、TabNavigatorタブナビゲーション、DrawerNavigator引き出しナビゲーションの3つのナビゲーションモードがあります。
//StackNavigator
npm install @react-navigation/stack
//TabNavigator
npm install @react-navigation/bottom-tabs
//DrawerNavigator
npm install @react-navigation/drawer
III.スタックナビゲーターナビゲーション
チュートリアルをご利用ください：
1.部品紹介
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';2. createStackNavigator createStackNavigatorは、APP画面間の切り替え機能を提供します。画面間の切り替えを管理するためにスタックの形になっており、画面への新しい切り替えはスタックの一番上に配置されます。
const Stack = createStackNavigator();
3.画面切り替えが必要なコンポーネントをスタックナビゲーションに入れます。
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
4.完全なコード
app/views/LoginScreen.js
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
export default class HomeScreen extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Home')}>
<Text >ジャンプ・ホーム</Text>
</TouchableOpacity>
</View>
)
}
}
app/views/HomeScreen.js
import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
export default class HomeScreen extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Login')}>
<Text >ジャンプログイン</Text>
</TouchableOpacity>
</View>
)
}
}
App.js
import 'react-native-gesture-handler';
import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
//ページ・モジュールの紹介
import LoginScreen from './app/views/LoginScreen';
import HomeScreen from './app/views/HomeScreen';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
詳細なパラメータと設定の説明
<Stack.Navigator
initialRouteName="Page1" //初期化ページなので、書かなければデフォルトで最初の画面が初期化ページになる。
screenOptions={{ //ヘッダー情報をカスタマイズするために使用する。
title: 'テスト・タイトル',
headerStyle: {
backgroundColor: '#ee7530'
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
fontSize: 20
}
}}>
- keyboardHandlingEnabled falseの場合、新しい画面に移動するときにオンスクリーンキーボードが自動的に閉じません。デフォルトはtrueです。
- mode レンダリングとトランジションのスタイルを定義します card: 標準の iOS と Android の画面トランジションを使用します。これがデフォルトです。modal: これは次の 2 つのことを行います: headerMode を画面スタックに設定します。iOS の一般的なモードである、iOS の下から画面をスライドさせるように指定されている場合を除きます。
- headerMode ヘッダーのレンダリング方法を指定します float: 上部に留まり、画面が変わるとアニメーションする単一のヘッダーをレンダリングします。screen：画面ごとにヘッダーが追加され、画面に合わせてフェードイン・アウトします。none : タイトルなし。
- 画面構成オプション・オプションを使用して、ナビゲータ・タイトルのヘッダ・タイトル内の個々の画面を構成できます。
function StackScreen() {
return (
//
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'My home' }}
/>
// 動的に取得する
<Stack.Screen
name="Profile"
component={HomeScreen}
options={({ route }) => ({ title: route.params.name })}
/>
</Stack.Navigator>
);
}
/* コンポーネントのsetOptionsの使い方を変更する。 */
<Button
title="Update the title"
onPress={() => navigation.setOptions({ title: 'Updated!' })}
/>
header関数は、ヘッダーとして表示されるReact Elementを返します。以下はその例です。
header: ({ scene, previous, navigation }) => {
const { options } = scene.descriptor;
const title =
options.headerTitle !== undefined
? options.headerTitle
: options.title !== undefined
? options.title
: scene.route.name;
return (
<MyHeader
title={title}
leftButton={
previous ? <MyBackButton onPress={navigation.goBack} /> : undefined
}
style={options.headerStyle}
/>
);
};
headerShownはスクリーンヘッダーを表示するか隠すかを指定します。デフォルトでは、headerModeがnoneに設定されていない限り、ヘッダーは表示されます。headerTitle ヘッダーに使用するReact要素を返す文字列または関数。デフォルトはtitleオプションの値です。
function LogoTitle() {
return (
<Image
style={{ width: 50, height: 50 }}
source={require('@expo/snack-static/react-native-logo.png')}
/>
);
}
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ headerTitle: props => <LogoTitle {...props} /> }}
/>
</Stack.Navigator>
);
}
headerTitleAlign ヘッダータイトルの配置。デフォルトはiOS-center、Android-left headerTitleAllowFontScaling ヘッダーのタイトルフォントを "Text Size "ヘルパーの設定に合わせて拡大縮小するかどうか デフォルトはfalseです。headerBackAllowFontScaling 戻るボタンのヘッダータイトルフォントを "Text Size" ヘルパーの設定に合わせて拡大縮小するかどうか。デフォルトは false です。 headerBackImage この関数は、ヘッダーの戻るボタンにカスタムイメージを表示するための React Element を返します。この関数が使われるときは、引数オブジェクトに tintColor を指定します。デフォルトは、プラットフォームのデフォルトのバックアイコンイメージであるバックイメージソースのImageコンポーネントです。headerBackTitle iOSの戻るボタンで使用されるタイトル文字列。headerBackTitleVisibleは、戻るボタンのタイトルが表示されるかどうかの合理的なデフォルトを提供します。headerBackTitle 戻るボタンを画面に表示するのが適切でないときに使うタイトル文字列。"デフォルトでは "Back"。headerRight この関数は、ヘッダーの右側に表示する React 要素を返します。
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{
headerTitle: props => <LogoTitle {...props} />,
headerRight: () => (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="#fff"
/>
),
}}
/>
</Stack.Navigator>
);
}
import { BlurView } from 'expo-blur';
<Screen
name="Home"
component={HomeScreen}
options={{
headerTransparent: true,
headerBackground: () => (
<BlurView tint="light" intensity={100} style={StyleSheet.absoluteFill} />
),
}}
/>;
headerStatusBarHeight 半透明のステータスバーを表示するために、ヘッダーの上部に余分なパディングを追加します。デフォルトでは、デバイスセキュリティエリアの図の最大値が使用されます。デフォルトの動作を無効にし、高さをカスタマイズするには、0 またはカスタム値を渡します。cardShadowEnabled トランジション中にシャドウを表示するには、このプロップを使用します。cardOverlayEnabled トランジション中にカードの下に半透明の暗いオーバーレイが見えるようにするには、このプロップを使用します。デフォルトはtrueAndroidとfalseiOSです。 cardStyle スタック内のカードのスタイルオブジェクトです。デフォルトの背景色ではなく、カスタム背景色を指定できます。また、{ backgroundColor: 'transparent' }を指定することで、前の画面を下に表示させることもできます。mode: 'modal' 透明の背景を使用する場合、スタックビューの設定でも指定する必要があります。animationEnabled 画面遷移のアニメーションを有効にするかどうか。falseに設定すると、押されたり弾かれたりしたときに画面はアニメーションしません。デフォルトはtrueです。 animationTypeForReplace このスクリーンが他のスクリーンを置き換えるときに使用するアニメーションのタイプ。次の値をとります： push - 新しい画面を押すときに使用されるアニメーション pop - 画面をポップするときに使用されるアニメーション デフォルトはpushです。 popが使用されると、ポップ・アニメーションが置き換えられる画面に適用されます。gestureEnabled ジェスチャーを使ってこの画面を閉じることができるかどうか。デフォルトは trueiOS、falseAndroid。 gestureResponseDistance ジェスチャーを認識するための、画面の端からのタッチ距離をオーバーレイするオブジェクト。horizontal- 数 - 水平距離。vertical- 数値 - 垂直方向の距離。gestureVelocityImpact ジェスチャの速度相関を決定する数値。デフォルトは 0.3 です。 gestureDirection ジェスチャの方向。transitionSpec 画面遷移の設定オブジェクト。アニメーションに依存します。cardStyleInterpolator カードの各部分の補間スタイル。アニメーション関連はこちら headerStyleInterpolator ヘッダー部分の補間スタイル。アニメーションに関連する、safeAreaInsets画面のセーフエリアインセットはこちら。これは、ノッチやステータスバーなどのエレメントの使用を避けるために使用されます。デフォルトでは、デバイスのセーフエリアインセットは自動的に検出されます。このオプションを使用すると、動作をオーバーライドできます。次のオプション属性を含むオブジェクトを受け入れます： top- number - 一番上のイラストの値、例えばステータスバーやノッチを含む領域。right- 数値 - 左側のイラストの値です。bottom- 数値 - 一番下のエリアのナビゲーション・バーなど、一番上のイラストの値。left- 数値 - 右のイラストの値です。
IV.タブナビゲーターナビゲーション
ボトムナビゲーションバー、いくつかのアプリ開発ではボトムナビゲーションバースイッチを使用する必要があります。使い方はStackNavigatorと同様です。
npm install @react-navigation/bottom-tabs1.インストール： 2.完全なコード App.js
import 'react-native-gesture-handler';
import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native';
//
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
//ページ・モジュールの紹介
import LoginScreen from './app/views/LoginScreen';
import HomeScreen from './app/views/HomeScreen';
const Tab = createBottomTabNavigator();
function App() {
return (
<NavigationContainer>
<Tab.Navigator
tabBarOptions={{
activeTintColor: 'red',
inactiveTintColor: 'gray',
tabStyle : {
backgroundColor: '#ddd',
paddingBottom: 15,
borderRightWidth: 1,
borderRightColor: '#fff'
},
}}
>
<Tab.Screen name="Home" component={HomeScreen} options={{
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}} />
<Tab.Screen name="Login" component={LoginScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}
export default App;
詳細なパラメータと設定の説明
Tab.Navigatorの設定
initialRouteName ナビゲーションが最初にロードされたときにレンダリングされるルートの名前。
screenOptions ナビゲーションの画面で使用されるデフォルトのオプション。
lazyのデフォルトはtrueです。falseの場合、すべてのタブが即座にレンダリングされます。trueの場合、タブは最初にアクティブにされたときのみ表示されます。注意: 以降の訪問時にタブが再表示されることはありません。
tabBar タブバーとして表示する React 要素を返す関数です。
tabBarOptions タブバーコンポーネントのプロパティを含むオブジェクトです。activeTintColor - アクティブなタブのタブとアイコンの色です。- activeBackgroundColor - アクティブなタブの背景色です。- inactiveTintColor - 非アクティブタブのラベルとアイコンの色です。- inactiveBackgroundColor - 非アクティブなラベルの背景色です．- showLabel - ラベルラベルを表示するかどうか、デフォルトはtrueです - showIcon - ラベルアイコンを表示するかどうか、デフォルトはtrueです - style - ラベルバーのスタイルオブジェクトです。- labelStyle - ラベル・ラベルのスタイル・オブジェクト。- labelPosition - ラベル・アイコンに関連付けられたラベル・タグを表示する位置。利用可能な値は beside-icon と below-icon です。デフォルトは beside-icon です。 - tabStyle - タブ・ラベルのスタイル・オブジェクト。- allowFontScaling - タブのフォントを "Text Size" ヘルパーの設定に合わせて拡大縮小するかどうか。 - adaptive - 画面サイズに応じてタブアイコンとタブの配置を変更するかどうか。もしそうなら、タブアイコンとラベルは常に画面サイズに合わせますか？trueの場合、タブアイコンとラベルは常に縦に並びます。このときtrueにすると、タブレットではラベルアイコンとラベルは横並びになります。- safeAreaInset-overrides forceInset props.デフォルトは { bottom: 'always', top: 'never' } です。利用可能なキー top | bottom | left | right は値 'always' | 'never' で与えられます。- keyboardHidesTabBar - デフォルトはfalseです。trueの場合、キーボードが開いているときにタブバーを隠します。
オプションを使用して、ナビゲーション内の個々の画面を設定できます。サポートされているオプションは以下のとおりです：
- title 一般的なタイトルは、headerTitle と tabBarLabel の代替として使用できます。
- tabBarVisible true または false タブバーを表示または非表示にします。
- tabBarLabel タブバーに表示するタブのタイトル文字列、または与えられた関数は React に { focused: boolean, color: string } を返します。未定義の場合、シーンタイトルが使用されます。
- tabBarAccessibilityLabel タブ・ボタンのアクセシビリティ・ラベル。ユーザがタブをクリックしたときに、スクリーン・リーダーが読み取ります。タブのラベルがない場合は、設定することをお勧めします。
- tabBarTestID テストで見つかったタブボタンの ID。
- unmountOnBlur スクリーンを離れるときにアンマウントするかどうか。スクリーンをアンマウントすると、スクリーン内のネストされたナビゲータの状態だけでなく、スクリーン内のローカルの状態もリセットされます。デフォルトはfalse。
V. DrawerNavigatorナビゲーション
インストール：
npm install @react-navigation/drawer
フルコード
App.js
import 'react-native-gesture-handler';
import React, { Component } from 'react';
import { NavigationContainer } from '@react-navigation/native';
//
import { createDrawerNavigator } from '@react-navigation/drawer';
//ページ・モジュールの紹介
import LoginScreen from './app/views/LoginScreen';
import HomeScreen from './app/views/HomeScreen';
const Drawer = createDrawerNavigator();
function App() {
return (
<NavigationContainer
drawerStyle={{
backgroundColor: '#c6cbef',
width: 200,
}}
>
<Drawer.Navigator initialRouteName='Home'>
<Drawer.Screen name='Home' component={HomeScreen} />
<Drawer.Screen name='Login' component={LoginScreen} />
</Drawer.Navigator>
</NavigationContainer>
);
}
export default App;
