One place for hosting & domains

      Navigation

      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

      Comment utiliser le routage avec React Navigation dans React Native


      Introduction

      React Navigation est une bibliothèque populaire pour le routage et la navigation dans une application React Native.

      Cette bibliothèque aide à résoudre le problème de la navigation entre plusieurs écrans et du partage des données entre eux.

      À la fin de ce tutoriel, vous disposerez d’un réseau social rudimentaire. Il affichera le nombre de connexions dont dispose un utilisateur et fournira un moyen de se connecter avec des amis supplémentaires. Vous utiliserez cet exemple d’application pour découvrir comment naviguer dans les écrans d’applications mobiles en utilisant react-navigation.

      Conditions préalables

      Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

      Remarque : Si vous avez travaillé avec react-navigation auparavant, vous pourriez rencontrer certaines différences. Vous pouvez consulter la documentation pour les guides pour migrer de 3.x et migrer de 4.x.

      Ce tutoriel a été vérifié avec Node v14.7.0, npm v6.14.7, react v16.13.1, react-native v0.63.2, @react-navigation/native v5.7.3 et @react-navigation/stack v5.9.0.

      Étape 1 – Création d’une nouvelle application React Native

      Tout d’abord, créez une nouvelle application React Native en entrant la commande suivante dans votre terminal :

      • npx react-native init MySocialNetwork --version 0.63.2

      Ensuite, naviguez vers le nouveau répertoire :

      Et lancez l'application pour iOS :

      Ou alors, pour Android :

      Note : Si vous rencontrez des problèmes, vous devrez peut-être consulter Résolution de problèmes pour React Native CLI.

      Cela permettra de créer un projet squelette pour vous. Il ne ressemble pas beaucoup à un réseau social pour l'instant. Réglons ça.

      Ouvrez App.js :

      Remplacez le contenu d’App.js avec le code suivant pour afficher un message de bienvenue :

      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;
      

      Sauvegardez le fichier. Maintenant, lorsque vous exécutez l'application, un Welcome to MySocialNetwork! MySocialNetwork! apparaîtra dans votre simulateur.

      Dans l'étape suivante, vous ajouterez d'autres écrans à votre application.

      Étape 2 - Création d'un HomeScreen et FriendsScreen

      Actuellement, vous disposez d'un seul écran affichant un message de bienvenue. Au cours de cette étape, vous créerez les deux écrans de votre application : HomeScreen et FriendsScreen.

      HomeScreen

      Votre application aura besoin d'un HomeScreen. Le HomeScreen affichera le nombre d'amis déjà présents dans votre réseau.

      Prenez le code d’App.js et ajoutez-le à un nouveau fichier appelé HomeScreen.js :

      Ouvrez HomeScreen.js:

      Modifiez HomeScreen.js pour utiliser HomeScreen au lieu d’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;
      

      Ce code produira un message de remplacement You have (undefined) friends. Vous fournirez une valeur plus tard.

      FriendsScreen

      Votre application aura également besoin d'un FriendsScreen. Sur le FriendsScreen, vous pourrez ajouter de nouveaux amis.

      Prenez le code de App.js et ajoutez-le à un nouveau fichier appelé FriendsScreen.js :

      • cp App.js FriendsScreen.js

      Ouvrez FriendsScreen.js :

      Modifiez FriendsScreen.js pour utiliser FriendsScreen au lieu d’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;
      

      Ce code produira un Add friends here! here!

      À ce stade, vous avez un HomeScreen et FriendsScreen. Cependant, il n'y a pas moyen de naviguer entre eux. Vous développerez cette fonctionnalité au cours de la prochaine étape.

      Étape 3 - Utilisation des StackNavigator avec React Navigation

      Pour naviguer entre les écrans, vous utiliserez un StackNavigator. Un StackNavigator fonctionne exactement comme une pile d'appels. Chaque écran vers lequel vous naviguez est poussé vers le haut de la pile. Chaque fois que vous appuyez sur le bouton Retour, les écrans se détachent du haut de la pile.

      Tout d'abord, installez @react-navigation/native :

      • npm install @react-navigation/native@5.7.3

      Ensuite, installez @react-navigation/stack et ses dépendances :

      • 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

      Remarque : Si vous développez pour iOS, vous pouvez avoir besoin de naviguer vers le répertoireios et exécuter pod install.

      Ensuite, revisitez App.js :

      Ajoutez NavigationContainer et 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();
      

      Ensuite, remplacez le contenu de render :

      App.js

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

      Nichée à l'intérieur <Stack.Navigator>, ajoutez le 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>
          );
        }
      }
      
      // ...
      

      Ce code crée une très petite pile pour votre navigateur avec un seul écran : HomeScreen.

      Nichée à l'intérieur <Stack.Navigator>, ajoutez le 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>
          );
        }
      }
      
      // ...
      

      Ce code ajoute le FriendsScreen au navigateur.

      Remarque : Cela diffère de la façon dont createStackNavigator a été utilisé dans les versions précédentes de React Navigation.

      Maintenant, le navigateur est conscient de vos deux écrans.

      Ajouter des boutons à HomeScreen et FriendsScreen

      Enfin, ajoutez des boutons pour vous déplacer entre vos deux écrans.

      Dans HomeScreen.js, ajoutez le code suivant :

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

      Dans FriendsScreen.js, ajoutez le code suivant :

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

      Parlons de this.props.navigation. Tant que votre écran est inclus dans le StackNavigatorIl hérite automatiquement de nombreux accessoires utiles de la navigation objet. Dans ce cas, vous avez utilisé navigate pour passer à une autre page.

      HomeScreen et FriendsScreen

      Si vous ouvrez maintenant votre simulateur, vous pouvez naviguer entre le HomeScreen et le FriendsScreen.

      Étape 4 - Utilisation de Context pour transmettre des données à d'autres écrans

      Dans cette étape, vous allez créer un ensemble d'amis possibles - Alice, Bob et Sammy - et une série vide d'amis actuels. Vous créerez également une fonctionnalité permettant à l'utilisateur d'ajouter des amis possibles à ses amis actuels.

      Ouvrez App.js : 

      Ajoutez possibleFriends et currentFriends à l'état du composant :

      App.js

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

      Ensuite, ajoutez une fonction permettant de déplacer un ami éventuel dans la liste des amis actuels :

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

      À ce stade, vous avez terminé la construction de la fonctionnalité permettant d'ajouter des amis.

      Ajouter FriendsContext à App

      Vous pouvez maintenant ajouter des amis dans App.jsmais vous voudrez les ajouter à FriendsScreen.js et les faire afficher dans HomeScreen.js. Comme ce projet est construit avec React, vous pouvez injecter cette fonctionnalité dans vos écrans avec context.

      Note : Dans les versions précédentes de React Navigation, il était possible d'utiliser screenProps pour partager les données entre les écrans. Dans la version actuelle de React Navigation, il est recommandé d'utiliser React Context pour partager les données entre les écrans.

      Pour éviter une référence circulaire, vous voudrez un nouveau fichier FriendsContext :

      Exportez FriendsContext :

      FriendsContext

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

      Ouvrez App.js : 

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

      Ce code établit FriendsContext comme nouvel objet Context et enveloppe le NavigationContainer dans un Context.Provider afin que tous les enfants de l'arbre des composants puissent s'abonner aux changements de contexte.

      Puisque vous n'utilisez plus View ou Text, il est possible de supprimer ces importations de react-native.

      Vous devrez fournir une valeur pour rendre les données accessibles aux consommateurs :

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

      Cela permettra à la HomeScreen et FriendsScreen de référencer tout changement de contexte currentFriends et possibleFriends.

      Vous pouvez maintenant travailler sur le référencement du contexte dans vos écrans.

      Ajouter FriendsContext à HomeScreen

      Dans cette étape, vous configurerez l'application pour afficher le nombre actuel d'amis.

      Ouvrez HomeScreen.js :

      Et ajoutez le 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;
      
      // ...
      

      Ce code établit un Classe.contexteType. Vous pouvez maintenant accéder au contexte dans vos écrans.

      Par exemple, faisons en sorte que votre HomeScreen affiche combien de currentFriends vous avez :

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

      Si vous ouvrez à nouveau votre application dans le simulateur et que vous visualisez le HomeScreenvous verrez le message : You have 0 friends!

      Ajoutez FriendsContext à FriendsScreen

      Dans cette étape, vous configurerez l'application pour afficher les amis possibles et fournir des boutons pour les ajouter aux amis actuels.

      Ensuite, ouvrez FriendsScreen.js :

      Et ajoutez le 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;
      
      // ...
      

      Ce code établit un Class.contextType.

      Maintenant, créez un bouton pour ajouter des amis dans 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;
      
      // ...
      

      Si vous ouvrez à nouveau votre application dans le simulateur et que vous visualisez le FriendsScreen, vous verrez une liste d'amis à ajouter.

      HomeScreen avec 0 currentFriends et FriendsScreen avec 3 possibleFriends

      Si vous visitez le FriendsScreen et cliquez sur le bouton pour ajouter des amis, vous verrez la liste des possibleFriends diminuer. Si vous visitez le HomeScreen, vous verrez le nombre d'amis augmenter.

      Vous pouvez désormais naviguer entre les écrans et partager des données entre eux.

      Conclusion

      Dans ce tutoriel, vous avez créé un exemple d'application React Native avec plusieurs écrans. En utilisant React Navigation, vous avez imaginé un moyen de naviguer entre les écrans. En utilisant React Context, vous avez développé un moyen de partager des données entre les écrans.

      L'ensemble du code source de ce tutoriel est disponible sur GitHub.

      Si vous souhaitez approfondir votre connaissance de React Navigation, consultez leur documentation.

      React Navigation n'est pas la seule solution de routage et de navigation. Il y a aussi React Native Navigation, React Native Router Fluxet React Router Native.

      Si vous souhaitez en savoir plus sur React, consultez notre série Comment coder dans React.js ou consultez notre page thématique React pour des exercices et des projets de programmation.



      Source link

      Verwenden von Routing mit React Navigation in React Native


      Einführung

      React Navigation ist eine beliebte Bibliothek für das Routing und die Navigation in einer React Native-Anwendung.

      Diese Bibliothek hilft bei der Navigation zwischen mehreren Bildschirmen und dem Austausch von Daten zwischen ihnen.

      Am Ende dieses Tutorials haben Sie ein rudimentäres soziales Netzwerk. Es zeigt die Anzahl der Freundschaften eines Benutzers an und bietet eine Möglichkeit, sich mit zusätzlichen Freunden zu verbinden. Sie verwenden diese Beispielanwendung zur Erkundung, wie Sie mobile App-Bildschirme mit react-navigation navigieren können.

      Voraussetzungen

      Um dieses Tutorial zu absolvieren, benötigen Sie:

      Hinweis: Wenn Sie in der Vergangenheit mit react-navigation gearbeitet haben, können Sie ggf. auf einige Unterschiede stoßen. Sie können die Dokumentation für Leitfäden zur Migration von 3.x und Migration von 4.x konsultieren.

      Dieses Tutorial wurde mit Node v14.7.0, npm v6.14.7, react v16.13.1, react-native v0.63.2, @react-navigation/native v5.7.3 und @react-navigation/stack v5.9.0 verifiziert.

      Schritt 1 — Erstellen einer neuen React Native-Anwendung

      Erstellen Sie zunächst eine neue React Native-Anwendung, indem Sie den folgenden Befehl in Ihrem Terminal eingeben:

      • npx react-native init MySocialNetwork --version 0.63.2

      Navigieren Sie dann zum neuen Verzeichnis:

      Und starten Sie die Anwendung für iOS:

      Alternativ für Android:

      Hinweis: Wenn Probleme auftreten, müssen Sie möglicherweise Probleme bei der Fehlerbehebung für die React Native-CLI konsultieren.

      Dadurch wird ein grundlegendes Projekt für Sie erstellt. Es sieht noch nicht wirklich wie ein soziales Netzwerk aus. Wir werden das beheben.

      Öffnen Sie App.js:

      Ersetzen Sie den Inhalt von App.js durch den folgenden Code, um eine Willkommensnachricht anzuzeigen:

      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;
      

      Speichern Sie die Datei. Wenn Sie nun die Anwendung ausführen, wird die Nachricht Willkommen bei MySocialNetwork! in Ihrem Simulator angezeigt.

      Im nächsten Schritt fügen Sie weitere Bildschirme zu Ihrer Anwendung hinzu.

      Schritt 2 — Erstellen eines HomeScreen und eines FriendsScreen

      Derzeit haben Sie einen einzigen Bildschirm, der eine Willkommensnachricht anzeigt. In diesem Schritt erstellen Sie die folgenden beiden Bildschirme für Ihre Anwendung: HomeScreen und FriendsScreen.

      HomeScreen

      Ihre Anwendung wird einen HomeScreen benötigen. Der HomeScreen zeigt die Anzahl der Freunde an, die bereits in Ihrem Netzwerk sind.

      Nehmen Sie den Code von App.js und fügen Sie ihn zu einer neuen Datei namens HomeScreen.js hinzu.

      Öffnen Sie HomeScreen.js:

      Ändern Sie HomeScreen.js, um HomeScreen anstelle von App zu verwenden.

      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;
      

      Dieser Code erstellt eine Platzhalternachricht für Du hast (undefiniert) Freunde.. Sie werden später einen Wert angeben.

      FriendsScreen

      Ihre Anwendung wird auch einen FriendsScreen benötigen. Auf dem FriendsScreen können Sie neue Freunde hinzufügen.

      Nehmen Sie den Code von App.js und fügen Sie ihn zu einer neuen Datei namens FriendsScreen.js hinzu.

      • cp App.js FriendsScreen.js

      Öffnen Sie FriendsScreen.js:

      Ändern Sie FriendsScreen.js, um FriendsScreen anstelle von App zu verwenden.

      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;
      

      Dieser Code erstellt eine Nachricht für Hier Freunde hinzufügen!

      Zu diesem Zeitpunkt haben Sie einen HomeScreen und einen FriendsScreen. Es gibt jedoch keine Möglichkeit, zwischen ihnen zu navigieren. Sie werden diese Funktionalität im nächsten Schritt erstellen.

      Schritt 3 — Verwenden von StackNavigator mit React Navigation

      Für die Navigation zwischen Bildschirmen verwenden Sie einen StackNavigator. Ein StackNavigator funktioniert genau wie ein Call Stack. Jeder Bildschirm, zu dem Sie navigieren, wird nach oben auf den Stack gelegt. Jedes Mal, wenn Sie auf die Back-Taste drücken, verschwinden die Bildschirme vom oberen Teil des Stacks.

      Installieren Sie zunächst @react-navigation/native:

      • npm install @react-navigation/native@5.7.3

      Installieren Sie dann @react-navigation/stack und seine Peer-Abhängigkeiten:

      • 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

      Hinweis: Wenn Sie für iOS entwickeln, müssen Sie möglicherweise zum Verzeichnis ios navigieren und pod install ausführen.

      Als Nächstes kehren Sie zu App.js zurück:

      Fügen Sie NavigationContainer und createStackNavigator zu App.js hinzu.

      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();
      

      Ersetzen Sie dann den Inhalt von render:

      App.js

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

      Fügen Sie in <Stack.Navigator> verschachtelt den HomeScreen hinzu:

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

      Dieser Code erstellt einen sehr kleinen Stack für Ihren Navigator mit nur einem Bildschirm: HomeScreen.

      Fügen Sie in <Stack.Navigator> verschachtelt den FriendsScreen hinzu:

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

      Dieser Code fügt den FriendsScreen zum Navigator hinzu.

      Hinweis: Dies unterscheidet sich von der Art und Weise, wie createStackNavigator in vorherigen Versionen von React Navigation verwendet wurde.

      Nun ist sich der Navigator der beiden Bildschirme bewusst.

      Hinzufügen von Schaltflächen zu HomeScreen und FriendsScreen

      Fügen Sie abschließend Schaltflächen hinzu, um zwischen Ihren beiden Bildschirmen wechseln zu können.

      Fügen Sie in HomeScreen.js den folgenden Code hinzu:

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

      Fügen Sie in FriendsScreen.js den folgenden Code hinzu:

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

      Sprechen wir über this.props.navigation. Solange Ihr Bildschirm im StackNavigator enthalten ist, erbt er automatisch viele nützliche Props aus dem Objekt navigation. In diesem Fall haben Sie navigate verwendet, um zu einer anderen Seite zu wechseln.

      HomeScreen und FriendsScreen

      Wenn Sie nun Ihren Simulator öffnen, können Sie zwischen HomeScreen und FriendsScreen navigieren.

      Schritt 4 — Verwenden von Context zur Weitergabe von Daten an andere Bildschirme

      In diesem Schritt erstellen Sie ein Array mit möglichen Freunden — Alice, Bob und Sammy — und ein leeres Array mit aktuellen Freunden. Sie werden auch eine Funktion erstellen, mit der der Benutzer mögliche Freunde zu seinen aktuellen Freunden hinzufügen kann.

      Öffnen Sie App.js:

      Fügen Sie possibleFriends und currentFriends zum Zustand der Komponente hinzu:

      App.js

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

      Fügen Sie als Nächstes eine Funktion hinzu, mit der sich ein möglicher Freund in die Liste aktueller Freunde verschieben lässt:

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

      Jetzt haben Sie die Funktionalität zum Hinzufügen von Freunden fertiggestellt.

      Hinzufügen von FriendsContext zu App

      Jetzt können Sie Freunde in App.js hinzufügen, aber Sie wollen auch, dass sie zu FriendsScreen.js hinzugefügt und in HomeScreen.js angezeigt werden. Da dieses Projekt mit React erstellt wurde, können Sie diese Funktionalität mit Kontext in Ihre Bildschirme injizieren.

      Hinweis: In vorherigen Versionen von React Navigation war es möglich, screenProps zu verwenden, um Daten zwischen Bildschirmen auszutauschen. In der aktuellen Version von React Navigation wird empfohlen, React Context für den Austausch von Daten zwischen Bildschirmen zu nutzen.

      Um eine zirkuläre Referenz zu vermeiden, sollten Sie eine neue Datei namens FriendsContext erstellen:

      Exportieren Sie FriendsContext:

      FriendsContext

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

      Öffnen Sie App.js:

      Fügen Sie den FriendsContext hinzu:

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

      Dieser Code erstellt FriendsContext als neues Context-Objekt und umschließt den NavigationContainer in einer Context.Provider-Komponente, damit alle untergeordneten Elemente im Komponentenbaum Kontextänderungen abonnieren können.

      Da Sie Ansicht oder Text nicht mehr verwenden, ist es möglich, diese Importe aus react-native zu entfernen.

      Sie müssen einen Wert angeben, um Daten Verbrauchern zugänglich zu machen:

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

      Dadurch werden der HomeScreen und FriendsScreen alle Kontextänderungen bei currentFriends und possibleFriends referenzieren können.

      Jetzt können Sie daran arbeiten, den Kontext in Ihren Bildschirmen zu referenzieren.

      Hinzufügen von FriendsContext zu HomeScreen

      In diesem Schritt richten Sie die Anwendung so ein, dass die aktuelle Freundeszahl angezeigt wird.

      Öffnen Sie HomeScreen.js:

      Fügen Sie den FriendsContext hinzu:

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

      Dieser Code erstellt einen Class.contextType. Sie können nun auf Kontext in Ihren Bildschirmen zugreifen.

      Lassen wir beispielsweise Ihren HomeScreen anzeigen, wie viele currentFriends Sie haben:

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

      Wenn Sie Ihre Anwendung im Simulator erneut öffnen und den HomeScreen anzeigen, sehen Sie die Nachricht: Du hast 0 Freunde!.

      Hinzufügen von FriendsContext zu FriendsScreen

      In diesem Schritt richten Sie die Anwendung so ein, dass die möglichen Freunde angezeigt und Schaltflächen zum Hinzufügen zu den aktuellen Freunden bereitgestellt werden.

      Öffnen Sie als Nächstes FriendsScreen.js:

      Fügen Sie den FriendsContext hinzu:

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

      Dieser Code erstellt einen Class.contextType.

      Erstellen Sie nun eine Schaltfläche zum Hinzufügen von Freunden in 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;
      
      // ...
      

      Wenn Sie Ihre Anwendung im Simulator erneut öffnen und den FriendsScreen anzeigen, sehen Sie eine Liste von Freunden, die hinzugefügt werden können.

      HomeScreen mit 0 currentFriends und FriendScreen mit 3 possibleFriends

      Wenn Sie den FriendsScreen besuchen und auf die Schaltfläche zum Hinzufügen von Freunden klicken, sehen Sie, dass die Liste von possibleFriends kleiner wird. Wenn Sie den HomeScreen besuchen, sehen Sie, dass die Anzahl der Freunde zunimmt.

      Sie können nun zwischen Bildschirmen navigieren und Daten zwischen ihnen austauschen.

      Zusammenfassung

      In diesem Tutorial haben Sie eine React Native-Anwendung mit mehreren Bildschirmen erstellt. Mithilfe von React Navigation haben Sie eine Möglichkeit zur Navigation zwischen Bildschirmen eingerichtet. Mithilfe von React Context haben Sie eine Möglichkeit entwickelt, um Daten zwischen Bildschirmen auszutauschen.

      Der komplette Quellcode für dieses Tutorial ist auf GitHub verfügbar.

      Wenn Sie mehr über React Navigation erfahren möchten, sehen Sie sich die entsprechende Dokumentation an.

      React Navigation ist nicht die einzige Routing- und Navigationslösung. Es gibt auch React Native Navigation, React Native Router Flux und React Router Native.

      Wenn Sie mehr über React erfahren möchten, sehen Sie sich unsere Reihe Codieren in React.js an oder besuchen Sie unsere React-Themenseite für Übungen und Programmierprojekte.



      Source link