Verwenden von Routing mit React Navigation in React Native

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.

cp App.js HomeScreen.js

Öffnen Sie HomeScreen.js:

nano HomeScreen.js

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

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.

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:

nano FriendsScreen.js

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

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.

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:

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:

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.

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

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.

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

nano FriendsContext.js

Exportieren Sie FriendsContext:

import React from 'react';

export const FriendsContext = React.createContext();

Öffnen Sie App.js:

nano App.js

Fügen Sie den FriendsContext hinzu:

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:

// ...

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.

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

Öffnen Sie HomeScreen.js:

nano HomeScreen.js

Fügen Sie den FriendsContext hinzu:

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:

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!.

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:

nano FriendsScreen.js

Fügen Sie den FriendsContext hinzu:

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:

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.

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.