ReactNativeでReactNavigationでルーティングを使用する方法
序章
React Navigation は、 ReactNativeアプリケーションでのルーティングとナビゲーションによく使用されるライブラリです。
このライブラリは、複数の画面間を移動したり、画面間でデータを共有したりする問題を解決するのに役立ちます。
このチュートリアルを終了すると、基本的なソーシャルネットワークができあがります。 ユーザーが持っている接続の数を表示し、追加の友達と接続する方法を提供します。 このサンプルアプリケーションを使用して、react-navigation
を使用してモバイルアプリケーション画面をナビゲートする方法を探ります。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。
- 新しいReactNativeプロジェクトを作成し、iOSまたはAndroidシミュレーターを使用するための環境のセットアップに精通していると、有益な場合があります。
注:過去にreact-navigation
を使用したことがある場合は、いくつかの違いが発生する可能性があります。 3.xからの移行および4.xからの移行に関するガイドについてはドキュメントを参照してください。
このチュートリアルは、ノードv14.7.0、npm
v6.14.7、react
v16.13.1、react-native
v0.63.2、@react-navigation/native
v5.7.3、および@react-navigation/stack
v5.9.0。
ステップ1—新しいReactNativeアプリを作成する
まず、ターミナルで次のコマンドを入力して、新しいReactNativeアプリを作成します。
npx react-native init MySocialNetwork --version 0.63.2
次に、新しいディレクトリに移動します。
cd MySocialNetwork
そして、iOS用のアプリケーションを起動します。
npm run ios
または、Androidの場合:
npm run android
注:問題が発生した場合は、 React NativeCLIのトラブルシューティングの問題を参照する必要がある場合があります。
これにより、スケルトンプロジェクトが作成されます。 今のところ、ソーシャルネットワークのようには見えません。 それを修正しましょう。
App.js
を開きます:
nano App.js
App.js
の内容を次のコードに置き換えて、ウェルカムメッセージを表示します。
App.js
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; class App extends React.Component { render() { return ( <View style={styles.container}> <Text>Welcome to MySocialNetwork!</Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); export default App;
ファイルを保存します。 これで、アプリケーションを実行すると、 Welcome to MySocialNetwork!メッセージがシミュレーターに表示されます。
次のステップでは、アプリケーションにさらに画面を追加します。
ステップ2—HomeScreen
およびFriendsScreen
を作成する
現在、ウェルカムメッセージを表示する単一の画面があります。 このステップでは、アプリケーション用にHomeScreen
とFriendsScreen
の2つの画面を作成します。
HomeScreen
アプリにはHomeScreen
が必要です。 HomeScreen
には、ネットワークにすでに存在する友達の数が表示されます。
App.js
からコードを取得し、HomeScreen.js
という名前の新しいファイルに追加します。
cp App.js HomeScreen.js
HomeScreen.js
を開きます:
nano HomeScreen.js
App
の代わりにHomeScreen
を使用するように、HomeScreen.js
を変更します。
HomeScreen.js
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; class HomeScreen extends React.Component { render() { return ( <View style={styles.container}> <Text>You have (undefined) friends.</Text> </View> ); } } // ... export default HomeScreen;
このコードは、あなたには(未定義の)友達がいます。プレースホルダーメッセージを生成します。 後で値を指定します。
FriendsScreen
アプリにはFriendsScreen
も必要です。 FriendsScreen
では、新しい友達を追加できます。
App.js
からコードを取得し、FriendsScreen.js
という名前の新しいファイルに追加します。
cp App.js FriendsScreen.js
FriendsScreen.js
を開きます:
nano FriendsScreen.js
App
の代わりにFriendsScreen
を使用するように、FriendsScreen.js
を変更します。
FriendsScreen.js
import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; class FriendsScreen extends React.Component { render() { return ( <View style={styles.container}> <Text>Add friends here!</Text> </View> ); } } // ... export default FriendsScreen;
このコードは、ここに友達を追加!メッセージを生成します。
この時点で、HomeScreen
とFriendsScreen
があります。 ただし、それらの間を移動する方法はありません。 次のステップでこの機能を構築します。
画面間を移動するには、StackNavigator
を使用します。 StackNavigator
は、コールスタックとまったく同じように機能します。 ナビゲートする各画面は、スタックの一番上にプッシュされます。 戻るボタンを押すたびに、画面がスタックの一番上から飛び出します。
まず、@react-navigation/native
をインストールします。
npm install @react-navigation/[email protected]
次に、@react-navigation/stack
とそのピア依存関係をインストールします。
npm install @react-navigation/[email protected] @react-native-community/[email protected] [email protected] [email protected] [email protected]
注: iOS向けに開発している場合は、ios
ディレクトリに移動して、pod install
を実行する必要がある場合があります。
次に、App.js
に再度アクセスします。
nano App.js
NavigationContainer
とcreateStackNavigator
をApp.js
に追加します。
App.js
import 'react-native-gesture-handler'; import React from 'react'; import { StyleSheet } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; const Stack = createStackNavigator();
次に、render
の内容を置き換えます。
App.js
// ... class App extends React.Component { render() { return ( <NavigationContainer> <Stack.Navigator> </Stack.Navigator> </NavigationContainer> ); } } // ...
<Stack.Navigator>
内にネストし、HomeScreen
を追加します。
App.js
import 'react-native-gesture-handler'; import React from 'react'; import { StyleSheet } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from './HomeScreen'; const Stack = createStackNavigator(); class App extends React.Component { render() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> </Stack.Navigator> </NavigationContainer> ); } } // ...
このコードは、HomeScreen
という1つの画面だけでナビゲーター用の非常に小さなスタックを作成します。
<Stack.Navigator>
内にネストし、FriendsScreen
を追加します。
App.js
import 'react-native-gesture-handler'; import React from 'react'; import { StyleSheet } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import HomeScreen from './HomeScreen'; import FriendsScreen from './FriendsScreen'; const Stack = createStackNavigator(); class App extends React.Component { render() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Friends" component={FriendsScreen} /> </Stack.Navigator> </NavigationContainer> ); } } // ...
このコードは、FriendsScreen
をナビゲーターに追加します。
注:これは、以前のバージョンのReactNavigationでcreateStackNavigator
が使用されていた方法とは異なります。
これで、ナビゲーターは2つの画面を認識します。
HomeScreen
およびFriendsScreen
へのボタンの追加
最後に、2つの画面の間に移動するボタンを追加します。
HomeScreen.js
に、次のコードを追加します。
HomeScreen.js
import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; class HomeScreen extends React.Component { render() { return ( <View style={styles.container}> <Text>You have (undefined) friends.</Text> <Button title="Add some friends" onPress={() => this.props.navigation.navigate('Friends') } /> </View> ); } } // ...
FriendsScreen.js
に、次のコードを追加します。
FriendsScreen.js
import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; class FriendsScreen extends React.Component { render() { return ( <View style={styles.container}> <Text>Add friends here!</Text> <Button title="Back to home" onPress={() => this.props.navigation.navigate('Home') } /> </View> ); } } // ...
this.props.navigation
について話しましょう。 画面がStackNavigator
に含まれている限り、navigation
オブジェクトから多くの便利な小道具を自動的に継承します。 この場合、navigate
を使用して別のページに移動しました。
ここでシミュレーターを開くと、HomeScreen
とFriendsScreen
の間を移動できます。
ステップ4—Context
を使用してデータを他の画面に渡す
このステップでは、可能な友達の配列— Alice
、Bob
、およびSammy
—と現在の友達の空の配列を作成します。 また、ユーザーが現在の友達に友達を追加するための機能を作成します。
App.js
を開きます:
nano App.js
possibleFriends
とcurrentFriends
をコンポーネントの状態に追加します。
App.js
// ... class App extends React.Component { constructor(props) { super(props) this.state = { possibleFriends: [ 'Alice', 'Bob', 'Sammy', ], currentFriends: [], } } // ... } // ...
次に、可能性のある友達を現在の友達のリストに移動する関数を追加します。
App.js
// ... class App extends React.Component { constructor(props) { super(props) this.state = { possibleFriends: [ 'Alice', 'Bob', 'Sammy', ], currentFriends: [], } } addFriend = (index) => { const { currentFriends, possibleFriends, } = this.state // Pull friend out of possibleFriends const addedFriend = possibleFriends.splice(index, 1) // And put friend in currentFriends currentFriends.push(addedFriend) // Finally, update the app state this.setState({ currentFriends, possibleFriends, }) } // ... } // ...
この時点で、友達を追加する機能の構築が完了しました。
FriendsContext
をApp
に追加
これで、App.js
に友達を追加できますが、FriendsScreen.js
に友達を追加して、HomeScreen.js
に表示することができます。 このプロジェクトはReactで構築されているため、コンテキストを使用してこの機能を画面に挿入できます。
注: React Navigationの以前のバージョンでは、screenProps
を使用して画面間でデータを共有することができました。 React Navigationの現在のバージョンでは、 ReactContextを使用して画面間でデータを共有することをお勧めします。
循環参照を回避するには、新しいFriendsContext
ファイルが必要になります。
nano FriendsContext.js
エクスポートFriendsContext
:
FriendsContext
import React from 'react'; export const FriendsContext = React.createContext();
App.js
を開きます:
nano App.js
FriendsContext
を追加します。
App.js
import 'react-native-gesture-handler'; import React from 'react'; import { StyleSheet } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { FriendsContext } from './FriendsContext'; import Home from './Home'; import Friends from './Friends'; const Stack = createStackNavigator(); class App extends React.Component { // ... render() { return ( <FriendsContext.Provider> <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={Home} /> <Stack.Screen name="Friends" component={Friends} /> </Stack.Navigator> </NavigationContainer> </FriendsContext.Provider> ); } } // ...
このコードは、FriendsContext
を新しいコンテキストオブジェクトとして確立し、NavigationContainer
をContext.Provider
コンポーネントにラップして、コンポーネントツリー内のすべての子がコンテキスト変更をサブスクライブできるようにします。 。
View
またはText
を使用しなくなったため、react-native
からこれらのインポートを削除することができます。
消費者がデータにアクセスできるようにするには、value
を提供する必要があります。
App.js
// ... class App extends React.Component { // ... render() { return ( <FriendsContext.Provider value={ { currentFriends: this.state.currentFriends, possibleFriends: this.state.possibleFriends, addFriend: this.addFriend } } > <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={Home} /> <Stack.Screen name="Friends" component={Friends} /> </Stack.Navigator> </NavigationContainer> </FriendsContext.Provider> ); } } // ...
これにより、HomeScreen
およびFriendsScreen
は、currentFriends
およびpossibleFriends
へのコンテキスト変更を参照できるようになります。
これで、画面内のコンテキストの参照に取り組むことができます。
FriendsContext
をHomeScreen
に追加
このステップでは、現在の友達数を表示するようにアプリケーションを設定します。
HomeScreen.js
を開きます:
nano HomeScreen.js
そして、FriendsContext
を追加します。
HomeScreen.js
import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import { FriendsContext } from './FriendsContext'; class HomeScreen extends React.Component { // ... } HomeScreen.contextType = FriendsContext; // ...
このコードは、Class.contextTypeを確立します。 これで、画面のコンテキストにアクセスできます。
たとえば、HomeScreen
にcurrentFriends
の数を表示させましょう。
HomeScreen.js
import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import { FriendsContext } from './FriendsContext'; class Home extends React.Component { render() { return ( <View style={styles.container}> <Text>You have { this.context.currentFriends.length } friends!</Text> <Button title="Add some friends" onPress={() => this.props.navigation.navigate('Friends') } /> </View> ); } } HomeScreen.contextType = FriendsContext; // ...
シミュレーターでアプリを再度開いてHomeScreen
を表示すると、友達が0人です!というメッセージが表示されます。
FriendsContext
をFriendsScreen
に追加
このステップでは、可能性のある友達を表示し、現在の友達に追加するためのボタンを提供するようにアプリケーションを設定します。
次に、FriendsScreen.js
を開きます。
nano FriendsScreen.js
そして、FriendsContext
を追加します。
FriendsScreen.js
import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import { FriendsContext } from './FriendsContext'; class FriendsScreen extends React.Component { // ... } FriendsScreen.contextType = FriendsContext; // ...
このコードはClass.contextType
を確立します。
次に、FriendsScreen.js
に友達を追加するためのボタンを作成します。
FriendsScreen.js
import React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import { FriendsContext } from './FriendsContext'; class Friends extends React.Component { render() { return ( <View style={styles.container}> <Text>Add friends here!</Text> { this.context.possibleFriends.map((friend, index) => ( <Button key={ friend } title={ `Add ${ friend }` } onPress={() => this.context.addFriend(index) } /> )) } <Button title="Back to home" onPress={() => this.props.navigation.navigate('Home') } /> </View> ); } } FriendsScreen.contextType = FriendsContext; // ...
シミュレーターでアプリを再度開いてFriendsScreen
を表示すると、追加する友達のリストが表示されます。
FriendsScreen
にアクセスし、ボタンをクリックして友達を追加すると、possibleFriends
のリストが減少します。 HomeScreen
にアクセスすると、友達の数が増えます。
これで、画面間を移動して、画面間でデータを共有できます。
結論
このチュートリアルでは、複数の画面を持つサンプルのReactNativeアプリケーションを作成しました。 React Navigationを使用して、画面間を移動する方法を考案しました。 React Contextを使用して、画面間でデータを共有する方法を開発しました。
このチュートリアルの完全なソースコードは、GitHubで入手できます。
React Navigationをさらに深く掘り下げたい場合は、それらのドキュメントをチェックしてください。
React Navigationは、ルーティングおよびナビゲーションソリューションだけではありません。 React Native Navigation 、 React Native Router Flux 、および React RouterNativeもあります。
Reactの詳細については、 React.js シリーズのコーディング方法をご覧になるか、Reactトピックページで演習やプログラミングプロジェクトを確認してください。