One place for hosting & domains

      How To Boost SEO Using Gatsby’s SEO Component and Gatsby React Helmet


      The author selected /dev/color to receive a donation as part of the Write for DOnations program.

      Introduction

      When a user codes and deploys a website, they often want an online audience to find and read the website they’ve created. Search engine optimization (SEO) is the practice of making a website discoverable by this online audience. Optimizing search involves making changes to your Gatsby app so that it will show up in the results for search engines like Google, Bing, and DuckDuckGo. This is often done by fine-tuning the metadata that ends up in the HTML for your site.

      In this tutorial, you will configure Gatsby’s SEO component that comes with SEO tooling right out of the box. You will add meta tags to your site using Gatsby React Helmet. Meta tags are important because they give search engines information about your site. Usually the better understanding Google has about your site, the more accurately it can index your webpage. You will also create social media cards for Twitter, and Open Graph meta tags in Facebook. There are over one billion people using some form of social media, so optimizing for social media is an efficient way to get your website in front of many internet users.

      Prerequisites

      Step 1 — Creating an Empty Project

      In this section, you are going to create a new project based on the Gatsby starter default template. You are going to create a whale-watching website, and in the following steps you will improve its SEO. This will give you a solid project that you can optimize with meta tags and social media assets.

      First, use the CLI tool to start a new project named gatsby-seo-project:

      • gatsby new gatsby-seo-project https://github.com/gatsbyjs/gatsby-starter-default

      This creates a new website from the starter template in the gatsby-starter-default GitHub repository from Gatsby.

      Once the project is created, move into the src/images folder of the project:

      • cd gatsby-seo-project/src/images

      Once you are in the images folder, download a picture of a whale from the stock photography website Unsplash:

      • wget 'https://unsplash.com/photos/JRsl_wfC-9A/download?force=true&w=640'

      Wget is a Gnu command that downloads files from the internet.

      Next, list all of the images in the same images directory with the ls command:

      You will receive the following output:

      Output

      'download?force=true&w=640' gatsby-astronaut.png gatsby-icon.png

      'download?force=true&w=640' is a hard name to remember, so rename it to whale-watching.png:

      • mv 'download?force=true&w=640' whale-watching.png

      Now that you have your whale image, go to the root of your project and open src/pages/index.js. Make the highlighted change in the following code to customize your website:

      gatsby-seo-project/src/pages/index.js

      import * as React from "react"
      import { Link } from "gatsby"
      import { StaticImage } from "gatsby-plugin-image"
      
      import Layout from "../components/layout"
      import SEO from "../components/seo"
      
      const IndexPage = () => (
        <Layout>
          <SEO title="Home" />
          <h1>Whale watching for all</h1>
          <p>Come see extraordinary whales!</p>
          <StaticImage
            src="https://www.digitalocean.com/community/tutorials/images/whale-watching.png"
            width={300}
            quality={95}
            formats={["AUTO", "WEBP", "AVIF"]}
            alt="A surfacing whale"
            style={{ marginBottom: `1.45rem` }}
          />
          <p>
            <Link to="/page-2/">Go to page 2</Link> <br />
            <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
          </p>
        </Layout>
      )
      
      export default IndexPage
      

      Save the file. To try out the code, start a local development server with the following command:

      Once the server is running, check localhost:8000 in your browser. You will find your new site rendered in the browser:

      Gatsby site with whale image and text.

      You are now finished setting up your project. Next, you will add meta tags to your site header with React Helmet.

      Step 2 — Creating an SEO Component with React Helmet

      In this section, you are going to learn how to control the technical SEO aspects of your site with the help of Gatsby’s React Helmet plugin and an SEO component. The Helmet plugin provides server side rendering to all of the metadata found in the head of the Gatsby site. This is important because, without server side rendering, there is a chance that server engine bots might not be able to scrape and record metadata before the site is rendered, making it more difficult to index the site for search.

      When you use gatsby-starter-default as a base for your website, it already comes with everything you need to start tweaking SEO. To do this, you will be working with the following files:

      • gatsby-config.js: Gatsby config includes metadata values that GraphQL will query and place in the SEO file.

      • src/components/seo.js: This file contains the Helmet and the SEO component.

      You are first going to open the gatsby-config.js file, which is located at the root of your project:

      Before you make any changes to the file, examine the plugins key in the exported object. The Gatsby default starter already has the Helmet plugin installed, as shown in the following highlighted line:

      gatsby-seo-project/gatsby-config.js

      module.exports = {
        siteMetadata: {
          title: `Gatsby Default Starter`,
          description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
          author: `@gatsbyjs`,
        },
        plugins: [
          `gatsby-plugin-react-helmet`,
          `gatsby-plugin-image`,
          {
            resolve: `gatsby-source-filesystem`,
            options: {
              name: `images`,
              path: `${__dirname}/src/images`,
            },
          },
          `gatsby-transformer-sharp`,
          `gatsby-plugin-sharp`,
          {
            resolve: `gatsby-plugin-manifest`,
            options: {
              name: `gatsby-starter-default`,
              short_name: `starter`,
              start_url: `/`,
              background_color: `#663399`,
              theme_color: `#663399`,
              display: `minimal-ui`,
              icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
            },
          },
          `gatsby-plugin-gatsby-cloud`,
          // this (optional) plugin enables Progressive Web App + Offline functionality
          // To learn more, visit: https://gatsby.dev/offline
          // `gatsby-plugin-offline`,
        ],
      }
      

      Next, direct your attention to the siteMetadata key. This contains an object that holds the metadata for your site. You are going to change the title, the description, and the author. You will also add keywords to help users search for your site:

      gatsby-seo-project/gatsby-config.js

      module.exports = {
        siteMetadata: {
          title: `Wondrous World of Whale Watching`,
          description: `Come and enjoy an experience of a lifetime! Watch whales with us!`,
          author: `@digitalocean`,
          keywords: `whales, marine life, trip, recreation`,
        },
      ...
      

      The keywords metadata is instrumental in optimizing for search. While the topic of choosing keywords is beyond the scope of this tutorial, you can learn more about the basics of SEO at Google’s search documentation website. Here you have added specific search terms that users might use when searching for a site like the sample whale-watching site.

      Save and close this file.

      Next, proceed to open the SEO component:

      • nano src/components/seo.js

      There is a lot going on in the SEO component. Focus your attention on the SEO function. In this function you are using GraphQL to query the siteMetadata object. Remember that you have added keywords to your siteMetadata object, so make the following highlighted change to your query:

      gatsby-seo-project/src/components/seo.js

      ...
      function SEO({ description, lang, meta, title}) {
        const { site } = useStaticQuery(
          graphql`
            query {
              site {
                siteMetadata {
                  title
                  description
                  author
                  keywords
                }
              }
            }
          `
        )
      ...
      

      Below the SEO function, add a reference to this queried data in a keywords constant to make the data easier to work with:

      gatsby-seo-project/src/components/seo.js

      ...
        const keywords = site.siteMetadata.keywords
        const metaDescription = description || site.siteMetadata.description
        const defaultTitle = site.siteMetadata?.title
      ...
      

      The variable keywords has all of the keywords you created in the gatsby-config.js file. The variable metaDescription is a description that you can pass as a prop on a page or query from the siteMetadata object in gatsby-config.js. Finally, defaultTitle is set to the value of title in the siteMetadata object. The ? in the siteMetadata attribute checks for a null value and returns undefined for a null or nullish value.

      Next, inspect what the SEO component is returning, and add an object for keywords:

      gatsby-seo-project/src/components/seo.js

      ...
        return (
          <Helmet
            htmlAttributes={{
              lang,
            }}
            title={title}
            titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
            meta={[
              {
                name: `description`,
                content: metaDescription,
              },
              {
                name: `keywords`,
                content: keywords,
              },
              {
                property: `og:title`,
                content: title,
              },
              {
                property: `og:description`,
                content: metaDescription,
              },
              {
                property: `og:type`,
                content: `website`,
              },
              {
                name: `twitter:card`,
                content: `summary`,
              },
              {
                name: `twitter:creator`,
                content: site.siteMetadata?.author || ``,
              },
              {
                name: `twitter:title`,
                content: title,
              },
              {
                name: `twitter:description`,
                content: metaDescription,
              },
            ].concat(meta)}
          />
        )
      ...
      

      You are returning a Helmet component. Helmet populates the head of an HTML document using server side rendered data, which makes it easier for Google to crawl and record the metadata. htmlAttributes={{lang,}} specifies the language of the element’s content, and title is the title found in the metadata, which comes from siteMetadata. titleTemplate creates the title tag, which is important, since Google penalizes sites that are missing a title tag.

      After this section, you’ll find the meta object, which contains the metadata. Most of the values here come from siteMetadata.

      Finally, examine the SEO.defaultProps and SEO.propTypes objects:

      gatsby-seo-project/src/components/seo.js

      ...
      SEO.defaultProps = {
        lang: `en`,
        meta: [],
        description: ``,
      }
      
      SEO.propTypes = {
        description: PropTypes.string,
        lang: PropTypes.string,
        meta: PropTypes.arrayOf(PropTypes.object),
        title: PropTypes.string.isRequired,
      }
      

      SEO.defaultProps are the default values of the SEO props. SEO.propTypes passes the correct value type and acts as a light typing system.

      Save your file with the new keywords entry and start the local server in your terminal:

      After the server has starter, enter localhost:8000 in the browser. Open up the view of the HTML in your browser; for Chrome, right click the window and open DevTools. Choose Elements and open the <head></head> tag. In this tag, you will find the following line:

      ...
      <meta name="keywords" content="whales, marine life, trip, recreation" data-react-helmet="true">
      ...
      

      You have now successfully set the header data with React Helmet.

      In this section, you created metadata to improve the SEO of your whale-watching site. In the next section, you’ll add an image and make this site easier to share on social media.

      Step 3 — Adding Images to Enhance Social Sharing

      Social networks play an important role in attracting attention to your content. In this section, you are going to add an image to two features that optimize sharing your site on social: your Twitter card and the Open Graph protocol for Facebook. You will also learn which tools to use to ensure that your metadata is appearing on these two social network platforms.

      Open up gatsby-config in a text editor:

      You are going to add images/whale-watching.png into the siteMetadata:

      gatsby-seo-project/gatsby-config.js

      module.exports = {
        siteMetadata: {
          title: `Wondrous World of Whale Watching`,
          description: `Come and enjoy an experience of a lifetime! Watch whales with us!`,
          author: `@digitalocean`,
          keywords: `whales, marine life, trip, recreation`,
          image: `src/images/whale-watching.png`
        },
        plugins: [
          `gatsby-plugin-react-helmet`,
          `gatsby-plugin-image`,
          {
            resolve: `gatsby-source-filesystem`,
            options: {
              name: `images`,
              path: `${__dirname}/src/images`,
            },
          },
          `gatsby-transformer-sharp`,
          `gatsby-plugin-sharp`,
          {
            resolve: `gatsby-plugin-manifest`,
            options: {
              name: `gatsby-starter-default`,
              short_name: `starter`,
              start_url: `/`,
              background_color: `#663399`,
              theme_color: `#663399`,
              display: `minimal-ui`,
              icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
            },
          },
          `gatsby-plugin-gatsby-cloud`,
          // this (optional) plugin enables Progressive Web App + Offline functionality
          // To learn more, visit: https://gatsby.dev/offline
          // `gatsby-plugin-offline`,
        ],
      }
      

      GraphQL will now be able to query the image. Close and save the file.

      Next, open up seo.js in the text editor:

      • nano src/components/seo.js

      Now that your image is in the site metadata, it’s time to add it to the SEO component. Add the following highlighted lines to seo.js:

      gatsby-seo-project/src/components/seo.js

      ...
      function SEO({ description, lang, meta, title}) {
        const { site } = useStaticQuery(
          graphql`
            query {
              site {
                siteMetadata {
                  title
                  description
                  author
                  keywords
                  image
                }
              }
            }
          `
        )
        const image = site.siteMetadata.image
        const keywords = site.siteMetadata.keywords
        const metaDescription = description || site.siteMetadata.description
        const defaultTitle = site.siteMetadata?.title
      
        return (
          <Helmet
            htmlAttributes={{
              lang,
            }}
            title={title}
            titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
            meta={[
              {
                name: `description`,
                content: metaDescription,
              },
              {
                name: `keywords`,
                content: keywords,
              },
              {
                property: `og:title`,
                content: title,
              },
              {
                property: `og:description`,
                content: metaDescription,
              },
              {
                property: `og:type`,
                content: `website`,
              },
              {
                property: `og:image`,
                content: image,
              },
              {
                name: `twitter:card`,
                content: `summary`,
              },
              {
                name: `twitter:image`,
                content: image,
              },
              {
                name: `twitter:creator`,
                content: site.siteMetadata?.author || ``,
              },
              {
                name: `twitter:title`,
                content: title,
              },
              {
                name: `twitter:description`,
                content: metaDescription,
              },
            ].concat(meta)}
          />
        )
      }
      
      SEO.defaultProps = {
        lang: `en`,
        meta: [],
        description: ``,
      }
      
      SEO.propTypes = {
        description: PropTypes.string,
        image: PropTypes.string,
        lang: PropTypes.string,
        meta: PropTypes.arrayOf(PropTypes.object),
        title: PropTypes.string.isRequired,
      }
      
      export default SEO
      

      In this code, you:

      • Added the image to the GraphQL query
      • Created an image variable and set the value to the image found in siteMetadata
      • Added og:image to the meta object
      • Added twitter:image to the meta object
      • Added image to SEO.propTypes

      Save your changes and close seo.js.

      The final step in this process is to test these changes on Twitter and Facebook. This cannot be done from a local development server; in order to test your site, you must first deploy it. There are many ways to do this, including using DigitalOcean’s App Platform, which you can read about in the How To Deploy a Gatsby Application to DigitalOcean App Platform tutorial.

      This tutorial will use a Gatsby app hosted on App Platform as an example. You can find this app at https://digital-ocean-gatsby-seo-xkmfq.ondigitalocean.app/, and it includes the SEO changes you made to your site in this tutorial.

      If you want to test if social media objects show up on Twitter, head over https://cards-dev.twitter.com/validator. This validator is maintained by Twitter, and requires a Twitter account to use. Put the URL for the sample deployed site into the validator:

      Twitter card validator

      Notice that the custom image will now show when users tweet about your website.

      Next, head over to Facebook’s Open Graph validator at https://developers.facebook.com/tools/debug/. This is maintained by Facebook, and requires a Facebook account to use. Add the URL for the sample app into the URL field. The debugger will provide you with more detail about which og objects are present and which ones are missing:

      Facebook open graph validator

      Notice that the image appears with a title and a description in the Link Preview section.

      You’ve now added an image to your metadata, a Twitter card, and a Facebook Open Graph.

      Conclusion

      In this tutorial, you boosted the SEO of your site using Gatsby’s React Helmet and the SEO component. You’ve also learned how to add images to social media cards to make your site more shareable.

      With the basics of SEO covered, you can now read more about optimizing search for Gatsby at the official Gatsby documentation.





      Source link

      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