React NativeでReact Navigationを使用したルーティングの使用方法

アプリには、HomeScreenが必要です。HomeScreenには、すでにネットワークにいる友達の数が表示されます。

App.jsからコードを取得し、HomeScreen.jsという新しいファイルに追加します。

cp App.js HomeScreen.js

HomeScreen.jsを開きます。

nano HomeScreen.js

Appの代わりにHomeScreenを使用するように、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;

このコードを実行すると、**You have (undefined) friends.**というプレースホルダーメッセージが生成されます。後で値を指定します。

アプリには、FriendsScreenも必要です。FriendsScreenでは、新しい友達を追加することができます。

App.jsからコードを取得し、FriendsScreen.jsという新しいファイルに追加します。

cp App.js FriendsScreen.js

FriendsScreen.jsを開きます。

nano FriendsScreen.js

Appの代わりにFriendsScreenを使用するように、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;

このコードを実行すると、**Add friends here!**というメッセージが生成されます。

この時点で、HomeScreenとFriendsScreenが作成されています。ただし、これらの画面間をナビゲートする方法はありません。次のステップで、この機能を構築します。

最後に、2つの画面間を移動するボタンを追加します。

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に、次のコードを追加します。

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の間をナビゲートできます。

これでApp.jsに友達を追加できるようになりましたが、FriendsScreen.jsに友達を追加して、HomeScreen.jsに表示させたいと思うでしょう。このプロジェクトはReactで構築されているため 、コンテキストを使用してこの機能を画面に挿入できます。

循環参照を回避するために、新しいFriendsContextファイルが必要になります。

nano FriendsContext.js

FriendsContextをエクスポートします。

import React from 'react';

export const FriendsContext = React.createContext();

App.jsを開きます。

nano App.js

FriendsContextを追加します。

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を新しいContextオブジェクトとして設定し、Context.ProviderコンポーネントにNavigationContainerをラップして、コンポーネントツリー内のすべての子がコンテキストの変更をサブスクライブできるようにします。

ViewまたはTextを使用しなくなったため、react-nativeからこれらのインポートを削除できます。

利用者がデータにアクセスできるようにするには、valueを指定する必要があります。

// ...

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のコンテキスト変更を参照できます。

これで、画面のコンテキストを参照する作業に取り組むことができます。

このステップでは、現在の友達の数を表示するようにアプリケーションを設定します。

HomeScreen.jsを開きます。

nano HomeScreen.js

そして、FriendsContextを追加します。

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の数を表示してみましょう。

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を表示すると、**You have 0 friends!**というメッセージが表示されます。

このステップでは、友達になる可能性のある人達を表示し、現在の友達に追加するためのボタンを指定するようにアプリケーションを設定します。

次に、FriendsScreen .jsを開きます。

nano FriendsScreen.js

そして、FriendsContextを追加します。

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に友達を追加するボタンを作成します。

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にアクセスすると、友達の数が増加していることが分かります。

これで、画面間をナビゲートして、データの共有ができるようになりました。