One place for hosting & domains

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


      はじめに

      React Navigationは、React Nativeアプリケーションでルーティングとナビゲーションを行うための一般的なライブラリです。

      このライブラリは、複数の画面間をナビゲートしたり、画面間でデータを共有する際の問題を解決するのに役立ちます。

      このチュートリアルを終了すると、基本的なソーシャルネットワークが作成されます。ユーザーのつながりの数が表示され、さらに友達とつながる方法が提供されます。このサンプルアプリケーションを使用して、react-navigationを使用したモバイルアプリケーション画面のナビゲート方法を説明します。

      前提条件

      このチュートリアルを完了する には 、 次のものが必要です。

      注:過去にreact-navigationを使用したことがある場合は、いくつかの違いが生じる可能性があります。3.xからの移行および4.xからの移行に関するガイドについては、ドキュメントを参照してください。

      このチュートリアルは、Node 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 — 新しいReact Nativeアプリを作成する

      まず、端末に次のコマンドを入力して、新しいReact Nativeアプリを作成します。

      • npx react-native init MySocialNetwork --version 0.63.2

      次に、新しいディレクトリに移動します。

      次に、iOS用のアプリケーションを起動します。

      または、Android用は次のとおりです。

      注:問題が発生した場合は、React Native CLIのトラブルシューティングの問題を参照してください。

      これにより、スケルトンプロジェクトが作成されます。今のところ、ソーシャルネットワークのようには見えません。これを修正しましょう。

      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 — HomeScreenFriendsScreenを作成する

      現在、ウェルカムメッセージを表示する単一の画面があります。このステップでは、アプリケーション用にHomeScreenFriendsScreenの、2つの画面を作成します。

      HomeScreen

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

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

      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;
      

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

      FriendsScreen

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

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

      • cp App.js FriendsScreen.js

      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;
      

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

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

      ステップ 3 — React NavigationでStackNavigatorを使用する

      画面間をナビゲートするには、StackNavigatorを使用します。StackNavigatorは、コールスタックとまったく同じように機能します。ナビゲートする各画面は、スタックの一番上にプッシュされます。戻るボタンを押すたびに、その画面はスタックの一番上からポップされます。

      まず、@react-navigation/nativeをインストールします。

      • npm install @react-navigation/native@5.7.3

      次に、@react-navigation/stackとピア依存関係をインストールします。

      • npm install @react-navigation/stack@5.9.0 @react-native-community/masked-view@0.1.10 react-native-screens@2.10.1 react-native-safe-area-context@3.1.4 react-native-gesture-handler@1.7.0

      注:iOS用に開発している場合は、iosディレクトリにナビゲートしてpodインストールの実行が必要な場合があります。

      次に、App.jsに再度アクセスします。

      App.jsNavigationContainercreateStackNavigatorを追加します。

      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をナビゲーターに追加します。

      注:これは、以前のバージョンのReact NavigationでcreateStackNavigatorが使用されていた方法とは異なります。

      これで、ナビゲーターは2つの画面を認識します。

      HomeScreenFriendsScreenにボタンを追加する

      最後に、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 and FriendsScreen

      ここでシミュレータを開くと、HomeScreenFriendsScreenの間をナビゲートできます。

      ステップ 4 — コンテキストを使用して他の画面にデータを渡す

      このステップでは、AliceBobSammy、という友達になる可能性のある人達の配列と、現在の友達の空の配列を作成します。また、ユーザーが、友達になる可能性のある人達を、現在の友達に追加する機能も作成します。

      App.jsを開きます。

      コンポーネントのstateに、possibleFriendscurrentFriendsを追加します。

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

      注:以前のバージョンのReact Navigationでは、screenPropsを使用して画面間でデータを共有することができました。現在のバージョンのReact Navigationでは、React Contextを使用して画面間でデータを共有することをお勧めします。

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

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

      FriendsContext

      import React from 'react';
      
      export const FriendsContext = React.createContext();
      

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

      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>
          );
        }
      }
      
      // ...
      

      これにより、HomeScreenFriendsScreenは、currentFriendspossibleFriendsのコンテキスト変更を参照できます。

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

      HomeScreenFriendsContextを追加する

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

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

      FriendsScreenFriendsContextを追加する

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

      次に、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を表示すると、追加する友達のリストが表示されます。

      HomeScreen with 0 currentFriends and FriendScreen with 3 possibleFriends

      FriendsScreenにアクセスし、ボタンをクリックして友達を追加するとpossibleFriendsが減少しているリストが表示されます。HomeScreenにアクセスすると、友達の数が増加していることが分かります。

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

      まとめ

      このチュートリアルでは、複数の画面を使用してサンプルのReact Nativeアプリケーションを作成しました。React Navigationを使用して、画面間をナビゲートする方法を設計しました。React Contextを使用して、画面間でデータを共有する方法を構築しました。

      このチュートリアルの完全なソースコードは、GitHubで入手可能です。

      React Navigationの詳細については、ドキュメントを参照してください。

      React Navigationが、ルーティングとナビゲーションの唯一の解決策ではありません。React Native Navigation、React Native Router Flux、React Router Nativeもあります。

      React について詳しく知りたい場合は、How To Code in React.js(React.js のコーディング方法) シリーズを参照するか、演習とプログラミングプロジェクトの React トピックページをご覧ください。



      Source link

      Cara Menggunakan Perutean dengan React Navigation di React Native


      Pengantar

      React Navigation adalah pustaka populer untuk perutean dan navigasi di aplikasi React Native.

      Pustaka ini membantu memecahkan masalah navigasi di antara beberapa layar dan berbagi data antar layar.

      Di akhir tutorial ini, Anda akan memiliki jaringan sosial dasar. Tutorial ini akan menampilkan sejumlah hubungan yang dimiliki pengguna dan menyediakan cara menghubungkan dengan teman lainnya. Anda akan menggunakan aplikasi sampel ini untuk mendalami cara navigasi layar aplikasi seluler menggunakan react-navigation.

      Prasyarat

      Untuk menyelesaikan tutorial ini, Anda membutuhkan:

      Catatan: Jika dahulu Anda menggunakan react-navigation, Anda mungkin akan menemukan banyak perbedaan. Anda dapat membaca dokumentasi untuk panduan tentang migrasi dari 3.x dan migrasi dari 4.x.

      Tutorial ini telah diverifikasi pada Node v14.7.0, npm v6.14.7, react v16.13.1, react-native v0.63.2, @react-navigation/native v5.7.3, dan @react-navigation/stack v5.9.0.

      Langkah 1 — Membuat Aplikasi React Native Baru

      Pertama, buat aplikasi React Native baru dengan memasukkan perintah berikut di terminal Anda:

      • npx react-native init MySocialNetwork --version 0.63.2

      Kemudian, masuk ke direktori baru:

      Lalu mulai aplikasi untuk iOS:

      Atau, untuk Android:

      Catatan: Jika mengalami masalah, Anda mungkin perlu membaca pemecahan masalah untuk React Native CLI.

      Ini akan membuat proyek kerangka untuk Anda. Penampilannya sangat tidak mirip jaringan sosial yang ada sekarang ini. Mari kita perbaiki.

      Buka App.js:

      Ganti isi App.js dengan kode berikut untuk menampilkan pesan sambutan:

      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;
      

      Simpan berkas tersebut. Sekarang, bila Anda menjalankan aplikasi, pesan Selamat datang di MySocialNetwork! akan muncul di simulator Anda.

      Di langkah selanjutnya, Anda akan menambahkan layar lainnya ke aplikasi.

      Langkah 2 — Membuat HomeScreen dan FriendsScreen

      Saat ini, Anda memiliki satu layar yang menampilkan pesan sambutan. Dalam langkah ini, Anda akan membuat dua layar untuk aplikasi: HomeScreen dan FriendsScreen.

      HomeScreen

      Aplikasi Anda akan membutuhkan HomeScreen. HomeScreen akan menampilkan jumlah teman yang sudah ada di jaringan Anda.

      Ambil kode dari App.js dan tambahkan ke berkas baru bernama HomeScreen.js:

      Buka HomeScreen.js:

      Modifikasi HomeScreen.js untuk menggunakan HomeScreen sebagai ganti App:

      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;
      

      Kode ini akan menghasilkan pesan penampung You have (undefined) friends.. Nanti, Anda akan memberikan suatu nilai.

      FriendsScreen

      Aplikasi Anda juga akan membutuhkan FriendsScreen. Di FriendsScreen, Anda dapat menambahkan teman baru.

      Ambil kode dari App.js dan tambahkan ke berkas baru bernama FriendsScreen.js:

      • cp App.js FriendsScreen.js

      Buka FriendsScreen.js:

      Modifikasi FriendsScreen.js untuk menggunakan FriendsScreen sebagai ganti App:

      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;
      

      Kode ini akan menghasilkan pesan Add friends here!. .

      Saat ini, Anda memiliki HomeScreen dan FriendsScreen. Namun, tidak ada cara navigasi di antara layar-layar tersebut. Anda akan membangun fungsionalitas ini di langkah selanjutnya.

      Langkah 3 — Menggunakan StackNavigator dengan React Navigation

      Untuk navigasi di antara beberapa layar, Anda akan menggunakan StackNavigator. Cara kerja StackNavigator persis seperti call stack. Setiap layar yang Anda tuju akan didorong ke bagian atas tumpukan. Setiap kali menekan tombol kembali, layar-layar akan bermunculan di bagian atas tumpukan.

      Pertama, instal @react-navigation/native:

      • npm install @react-navigation/native@5.7.3

      Kemudian, instal @react-navigation/stack dan dependensi peer-nya:

      • npm install @react-navigation/stack@5.9.0 @react-native-community/masked-view@0.1.10 react-native-screens@2.10.1 react-native-safe-area-context@3.1.4 react-native-gesture-handler@1.7.0

      Catatan: Jika mengembangkan untuk iOS, Anda mungkin perlu masuk ke direktori ios dan menjalankan pod install.

      Selanjutnya, kembali ke App.js:

      Tambahkan NavigationContainer dan createStackNavigator ke 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();
      

      Kemudian, ganti isi render:

      App.js

      // ...
      
      class App extends React.Component {
        render() {
          return (
            <NavigationContainer>
              <Stack.Navigator>
              </Stack.Navigator>
            </NavigationContainer>
          );
        }
      }
      
      // ...
      

      Disarangkan di dalam <Stack.Navigator>, tambahkan 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>
          );
        }
      }
      
      // ...
      

      Kode ini membuat tumpukan sangat kecil untuk navigator Anda dengan satu layar saja: HomeScreen.

      Disarangkan di dalam <Stack.Navigator>, tambahkan 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>
          );
        }
      }
      
      // ...
      

      Kode ini menambahkan FriendsScreen ke navigator.

      Catatan: Ini berbeda dengan cara menggunakan createStackNavigator di React Navigation versi sebelumnya.

      Sekarang, navigator mengetahui kedua layar Anda.

      Menambahkan Tombol ke HomeScreen dan FriendsScreen

      Terakhir, tambahkan tombol untuk membawa Anda di antara dua layar.

      Dalam HomeScreen.js, tambahkan kode berikut:

      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>
          );
        }
      }
      
      // ...
      

      Dalam FriendsScreen.js, tambahkan kode berikut:

      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>
          );
        }
      }
      
      // ...
      

      Mari kita bahas this.props.navigation. Selama layar Anda disertakan di StackNavigator, layar itu secara otomatis akan mewarisi banyak properti berguna dari objek navigation. Dalam hal ini, Anda menggunakan navigate untuk berpindah ke halaman yang berbeda.

      HomeScreen dan FriendsScreen

      Jika sekarang Anda membuka simulator, Anda dapat melakukan navigasi di antara HomeScreen dan FriendsScreen.

      Langkah 4 — Menggunakan Context untuk Menyalurkan Data ke Layar Lain

      Dalam langkah ini, Anda akan membuat larik kemungkinan teman — Alice, Bob, dan Sammy — dan larik kosong dari teman saat ini. Anda juga akan membuat fungsionalitas bagi pengguna untuk menambahkan kemungkinan teman ke teman-temannya saat ini.

      Buka App.js:

      Tambahkan possibleFriends dan currentFriends ke status komponen:

      App.js

      // ...
      
      class App extends React.Component {
        constructor(props) {
          super(props)
          this.state = {
            possibleFriends: [
              'Alice',
              'Bob',
              'Sammy',
            ],
            currentFriends: [],
          }
        }
      
        // ...
      }
      
      // ...
      

      Selanjutnya, tambahkan fungsi untuk memindahkan kemungkinan teman ke daftar teman saat ini:

      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,
          })
        }
      
        // ...
      }
      
      // ...
      

      Saat ini, Anda telah selesai membangun fungsionalitas untuk menambahkan teman.

      Menambahkan FriendsContext ke App

      Sekarang Anda dapat menambahkan teman di App.js, tetapi Anda nanti perlu menambahkannya ke FriendsScreen.js, dan membuatnya ditampilkan di HomeScreen.js. Karena proyek ini dibuat dengan React, Anda dapat memasukkan fungsionalitas ini ke dalam layar yang memiliki konteks.

      Catatan: Di React Navigation versi sebelumnya, kita dapat menggunakan screenProps untuk berbagi data di antara layar. Dalam React Navigation versi saat ini, disarankan menggunakan React Context untuk berbagi data di antara layar.

      Untuk menghindari referensi melingkar, Anda nanti memerlukan berkas FriendsContext baru:

      Ekspor FriendsContext:

      FriendsContext

      import React from 'react';
      
      export const FriendsContext = React.createContext();
      

      Buka App.js:

      Tambahkan 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>
          );
        }
      }
      
      // ...
      

      Kode ini membuat FriendsContext sebagai objek Context baru dan membungkus NavigationContainer dalam komponen Context.Provider sehingga anak-anak di pohon komponen dapat berlangganan perubahan konteks.

      Karena Anda tidak lagi menggunakan View atau Text, bisa saja menghapus impor itu dari react-native.

      Anda nanti perlu memberikan value agar data dapat diakses oleh konsumen:

      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>
          );
        }
      }
      
      // ...
      

      Ini akan memungkinkan HomeScreen dan FriendsScreen untuk merujuk perubahan konteks apa pun pada currentFriends dan possibleFriends.

      Sekarang Anda dapat mengerjakan perujukan konteks di layar.

      Menambahkan FriendsContext ke HomeScreen

      Dalam langkah ini, Anda akan menyiapkan aplikasi untuk menampilkan jumlah teman saat ini.

      Buka HomeScreen.js:

      Lalu tambahkan 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;
      
      // ...
      

      Kode ini membuat Class.contextType. Kini Anda dapat mengakses konteks di layar.

      Misalnya, mari kita buat agar HomeScreen menampilkan jumlah currentFriends yang Anda miliki:

      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;
      
      // ...
      

      Jika Anda membuka aplikasi lagi di simulator dan menampilkan HomeScreen, Anda akan melihat pesan: You have 0 friends!.

      Menambahkan FriendsContext ke FriendsScreen

      Dalam langkah ini, Anda akan menyiapkan aplikasi untuk menampilkan kemungkinan teman dan menyediakan tombol untuk menambahkannya ke teman saat ini.

      Selanjutnya, buka FriendsScreen.js:

      Lalu tambahkan 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;
      
      // ...
      

      Kode ini membuat Class.contextType.

      Sekarang, buat tombol untuk menambahkan teman di 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;
      
      // ...
      

      Jika Anda membuka aplikasi lagi di simulator dan menampilkan FriendsScreen, Anda akan melihat daftar teman untuk ditambahkan.

      HomeScreen dengan 0 currentFriends dan FriendsScreen dengan 3 possibleFriends

      Jika Anda masuk ke FriendsScreen dan mengklik tombol untuk menambahkan teman, Anda akan melihat daftar possibleFriends yang berkurang. Jika Anda masuk ke HomeScreen, Anda akan melihat jumlah teman bertambah.

      Kini Anda dapat melakukan navigasi di antara layar dan berbagi data.

      Kesimpulan

      Dalam tutorial ini, Anda telah membuat aplikasi sampel React Native dengan beberapa layar. Dengan menggunakan React Navigation, Anda telah membuat cara navigasi di antara layar. Dengan React Context, Anda mengembangkan cara berbagi data di antara beberapa layar.

      Kode sumber lengkap untuk tutorial ini tersedia di GitHub.

      Jika Anda ingin lebih mendalami React Navigation, lihat dokumentasinya.

      React Navigation bukan satu-satunya solusi perutean dan navigasi. Ada juga React Native Navigation, React Native Router Flux, dan React Router Native.

      Jika Anda ingin mempelajari lebih lanjut tentang React, lihat seri Cara Melakukan Pengodean di React.js dari kami, atau baca halaman topik React kami untuk proyek pemrograman dan latihan.



      Source link

      Cara Mengaktifkan Perenderan Sisi-Server untuk Aplikasi React


      Pengantar

      Perenderan sisi-server atau server-side rendering (SSR) adalah teknik populer untuk merender aplikasi laman tunggal (single page application atau SPA) sisi-klien pada server, lalu mengirim laman yang telah dirender sepenuhnya ke klien. Ini memungkinkan komponen dinamis untuk disajikan sebagai markup HTML statis.

      Pendekatan ini dapat berguna untuk optimisasi mesin pencari (SEO) ketika pengindeksan tidak menangani JavaScript dengan benar. Ini juga dapat bermanfaat dalam situasi ketika proses pengunduhan bundel JavaScript besar terganggu oleh jaringan yang lambat.

      Dalam tutorial ini, Anda akan menginisialisasi aplikasi React menggunakan Create React App, lalu memodifikasi proyek tersebut untuk mengaktifkan perenderan sisi-server.

      Di akhir tutorial ini, Anda akan memiliki proyek yang berjalan dengan aplikasi React sisi-klien dan aplikasi Express sisi-server.

      Catatan: Sebagai alternatif, Next.js menawarkan pendekatan modern untuk menciptakan aplikasi statis dan dirender oleh server, yang dibangun dengan React.

      Prasyarat

      Untuk menyelesaikan tutorial ini, Anda memerlukan:

      Tutorial ini diverifikasi dengan Node v14.4.0 dan npm v6.14.5.

      Langkah 1 — Menciptakan Aplikasi React dan Memodifikasi Komponen Aplikasi

      Pertama-tama, kita menggunakan npx untuk memulai aplikasi React yang baru menggunakan versi terbaru dari Create React App.

      Mari kita sebut aplikasi kita my-ssr-app:

      • npx create-react-app@3.4.1 my-ssr-app

      Kemudian, kita lakukan cd ke direktori baru:

      cd my-ssr-app
      

      Terakhir, kita mulai aplikasi sisi-klien baru dalam rangka memverifikasi instalasi tersebut:

      Anda akan melihat contoh tampilan aplikasi React di jendela peramban.

      Sekarang, mari kita ciptakan komponen <Home>:

      Selanjutnya, tambahkan kode berikut ke berkas Home.js:

      src/Home.js

      import React from 'react';
      
      export default props => {
        return <h1>Hello {props.name}!</h1>;
      };
      

      Ini akan menciptakan tajuk <h1> dengan pesan "Hello" yang ditujukan ke suatu nama.

      Selanjutnya, mari kita render <Home> dalam komponen <App>. Buka berkas App.js:

      Kemudian, ganti baris kode yang ada saat ini dengan baris kode baru berikut:

      src/App.js

      import React from 'react';
      import Home from './Home';
      
      export default () => {
        return <Home name="Sammy" />;
      };
      

      Ini meneruskan suatu name ke komponen <Home> sehingga pesan yang kita harapkan muncul adalah "Hello Sammy!".

      Dalam berkas index.js pada aplikasi, kita akan menggunakan metode hydrate dari ReactDOM alih-alih render untuk mengindikasikan kepada perender DOM bahwa kita merehidrasi kembali aplikasi setelah melakukan render sisi-server.

      Mari kita buka berkas index.js:

      Kemudian, ganti konten dari berkas index.js dengan kode berikut:

      index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import App from './App';
      
      ReactDOM.hydrate(<App />, document.getElementById('root'));
      

      Itu menjadi akhir dari penyiapan sisi-klien, kita dapat melanjutkan ke penyiapan sisi-server.

      Langkah 2 — Menciptakan Server Express dan Merender Komponen Aplikasi

      Karena kita telah memiliki aplikasi, mari kita siapkan server yang akan mengirimkan versi yang sudah dirender. Kita akan menggunakan Express untuk server kita. Mari kita tambahkan ini ke proyek dengan memasukkan perintah berikut di jendela terminal Anda:

      • npm install express@4.17.1

      Atau, gunakan yarn:

      Selanjutnya, ciptakan direktori server di sebelah direktori src dari aplikasi:

      Kemudian, ciptakan berkas index.js yang akan berisi kode server Express:

      Tambahkan hasil impor yang akan memerlukan dan mendefinisikan sebagian konstanta:

      server/index.js

      import path from 'path';
      import fs from 'fs';
      
      import React from 'react';
      import express from 'express';
      import ReactDOMServer from 'react-dom/server';
      
      import App from '../src/App';
      
      const PORT = process.env.PORT || 3006;
      const app = express();
      

      Selanjutnya, tambahkan kode server dengan beberapa penanganan kesalahan:

      server/index.js

      // ...
      
      app.get('/', (req, res) => {
        const app = ReactDOMServer.renderToString(<App />);
      
        const indexFile = path.resolve('./build/index.html');
        fs.readFile(indexFile, 'utf8', (err, data) => {
          if (err) {
            console.error('Something went wrong:', err);
            return res.status(500).send('Oops, better luck next time!');
          }
      
          return res.send(
            data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
          );
        });
      });
      
      app.use(express.static('./build'));
      
      app.listen(PORT, () => {
        console.log(`Server is listening on port ${PORT}`);
      });
      

      Seperti yang Anda lihat, kita dapat mengimpor komponen <App> pada aplikasi klien secara langsung dari server.

      Tiga hal penting berlangsung di sini:

      • Kita memberi tahu Express untuk menyajikan konten dari direktori build sebagai berkas statis.
      • Kita menggunakan metode dari ReactDOMServer, renderToString, untuk merender aplikasi kita ke string HTML statis.
      • Kemudian, kita membaca berkas index.html statis dari aplikasi klien yang sudah dibangun, menyuntikkan konten statis dari aplikasi kita di dalam <div> dengan suatu id dari "root", dan mengirimkannya sebagai respons terhadap permintaan.

      Langkah 3 — Mengonfigurasi webpack, Babel, dan Skrip npm

      Agar kode server bekerja, kita perlu membundel dan mentranspilasi ini dengan webpack dan Babel. Untuk melakukannya, mari kita tambahkan dependensi dev ke proyek dengan memasukkan perintah berikut di jendela terminal Anda:

      • npm install webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --save-dev

      Atau, gunakan yarn:

      • yarn add webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --dev

      Catatan: Versi sebelumnya dari tutorial ini menginstal babel-core, babel-preset-env, dan babel-preset-react-app. Paket ini sudah lama diarsipkan, sehingga versi repo mono yang digunakan.

      Selanjutnya, ciptakan berkas konfigurasi Babel:

      Kemudian, tambahkan prasetel env dan react-app:

      .babelrc.json

      {
        "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
        ]
      }
      

      Catatan: Versi sebelumnya dari tutorial ini menggunakan berkas .babelrc (tidak ada ekstensi berkas .json). Ini adalah berkas konfigurasi untuk Babel 6, tetapi ini tidak lagi dapat diterapkan pada Babel 7.

      Sekarang, kita akan menciptakan konfigurasi webpack untuk server yang menggunakan Babel Loader untuk mentranspilasi kode. Mulailah dengan menciptakan berkas:

      Kemudian, tambahkan konfigurasi berikut ke berkas webpack.server.js:

      webpack.server.js

      const path = require('path');
      const nodeExternals = require('webpack-node-externals');
      
      module.exports = {
        entry: './server/index.js',
      
        target: 'node',
      
        externals: [nodeExternals()],
      
        output: {
          path: path.resolve('server-build'),
          filename: 'index.js'
        },
      
        module: {
          rules: [
            {
              test: /.js$/,
              use: 'babel-loader'
            }
          ]
        }
      };
      

      Dengan konfigurasi ini, bundel server kita yang telah ditranspilasi akan menjadi keluaran ke folder server-build di dalam berkas bernama index.js.

      Perhatikan penggunaan target: 'node' dan externals: [nodeExternals()] dari webpack-node-externals, yang akan mengabaikan berkas dari node_modules di dalam bundel; server dapat mengakses berkas ini secara langsung.

      Ini melengkapi instalasi dependensi dan konfigurasi webpack serta Babel.

      Sekarang, kita akan meninjau package.json untuk menambahkan skrip npm pembantu:

      Kita akan menambahkan dev:build-server, dev:start, dan skrip dev ke berkas package.json untuk membangun dan melayani aplikasi SSR kita dengan mudah:

      package.json

      "scripts": {
        "dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
        "dev:start": "nodemon ./server-build/index.js",
        "dev": "npm-run-all --parallel build dev:*",
        ...
      },
      

      Kita menggunakan nodemon untuk memulai ulang server saat kita membuat perubahan padanya. Kita juga menggunakan npm-run-all untuk menjalankan beberapa perintah secara paralel.

      Mari kita instal paket itu sekarang dengan memasukkan perintah berikut di jendela terminal Anda:

      • npm install nodemon@2.0.4 npm-run-all@4.1.5 --save-dev

      Atau, gunakan yarn:

      • yarn add nodemon@2.0.4 npm-run-all@4.1.5 --dev

      Dengan ini, Anda dapat menjalankan yang berikut ini untuk membangun aplikasi sisi-klien, membundel dan mentranspilasi kode server, dan memulai server pada :3006:

      Atau, gunakan yarn:

      Konfigurasi webpack server kita akan mengawasi perubahan dan server kita akan memulai ulang jika ada perubahan. Namun, untuk aplikasi klien, saat ini kita masih tetap perlu membangunnya setiap kali kita membuat perubahan. Ada masalah yang terbuka untuk hal itu di sini.

      Sekarang, buka http://localhost:3006/ di peramban web dan Anda akan melihat aplikasi yang terender sisi-server.

      Sebelumnya, kode sumbernya menampilkan:

      Output

      <div id="root"></div>

      Namun sekarang, dengan perubahan yang Anda buat, kode sumbernya menampilkan:

      Output

      <div id="root"><h1 data-reactroot="">Hello <!-- -->Sammy<!-- -->!</h1></div>

      Perenderan sisi-server berhasil mengonversi komponen <App> menjadi HTML.

      Kesimpulan

      Dalam tutorial ini, Anda telah menginisialisasi aplikasi React dan mengaktifkan perenderan sisi-server.

      Dengan tulisan ini, kita telah mempelajari bagian permukaan dari hal-hal yang mungkin dilakukan. Hal-hal cenderung menjadi sedikit lebih rumit setelah perutean, pengambilan data, atau Redux juga perlu menjadi bagian dari aplikasi yang dirender sisi-server.

      Salah satu manfaat utama dari menggunakan SSR adalah memiliki aplikasi yang dapat dijelajahi kontennya, bahkan untuk penjelajah yang tidak mengeksekusi kode JavaScript. Ini dapat membantu optimisasi mesin pencari (SEO) dan menyediakan metadata pada saluran media sosial.

      SSR juga sering kali dapat membantu performa karena aplikasi yang dimuat secara penuh dikirimkan dari server pada permintaan pertama. Untuk aplikasi nontrivial, jarak tempuh Anda mungkin berbeda karena SSR memerlukan penyiapan yang dapat menjadi sedikit rumit, dan ini menciptakan muatan lebih besar pada server. Perihal menggunakan perenderan sisi-server untuk aplikasi React bergantung pada kebutuhan spesifik Anda dan untung-rugi yang paling masuk akal untuk kasus penggunaan Anda.

      Jika Anda ingin mempelajari lebih lanjut tentang React, lihat seri Cara Melakukan Pengodean di React.js dari kami, atau baca halaman topik React kami untuk proyek pemrograman dan latihan.



      Source link