ホーム > React > Introduction to react-navigation implementation using templates
React

Introduction to react-navigation implementation using templates

Thank you for your continued support.
This article contains advertisements that help fund our operations.

Table Of Contents

  1. What is React Navigation
  2. Version
  3. Actual Code
  4. Customization
  5. Summary
オススメ本

This article summarizes how to introduce React-Navigation in React-Native expo.

What is React Navigation

It is easy to implement headers, menu tabs, back buttons quickly and add slide animations when digging through pages with React-Navigation.

I think navigation libraries are absolutely necessary, so I will create this article as a memorandum.

Version

This was implemented as of November 29, 2019.

React-Native has a tremendous frequency of updates including libraries, so please check the version.

$ expo --version
3.4.1
React-Navigation version 4.x

Installation

There are many things to install.

npm install react-navigation
//The one we will use this time

npm install react-navigation-stack
//Don't forget to install this as it was integrated in past versions

npm install react-navigation-tabs
//The same as above. If you want menu tabs.

Actual Code

Import the three mentioned above and use them.

Refer to the official page on how to use...

App.js

import { createAppContainer } from "react-navigation"
import { createStackNavigator } from "react-navigation-stack"
import { createBottomTabNavigator } from "react-navigation-tabs"

import HomeScreen from "./src/screens/HomeScreen"
import ContentScreen from "./src/screens/ContentScreen"
import MyPageScreen from "./src/screens/MyPageScreen"

const HomeStack = createStackNavigator({
  Home: { screen: HomeScreen },
  Content: { screen: ContentScreen }, // navigationOption: { headerTitle: 'Mr&MrsSnapshot' }
})

const SettingsStack = createStackNavigator({
  MyPage: { screen: MyPageScreen },
})

export default createAppContainer(
  createBottomTabNavigator(
    {
      Home: { screen: HomeStack },
      Settings: { screen: SettingsStack },
    },
    {}
  )
)

image14

If you look at the code and directory structure, you can guess.

Assign names to each tab using const, and write the pages you want to navigate to and the pages you want to have layers for.

If the number of tabs increases, the items inside export default will increase, and

If you increase the layers, the items inside createStackNavigator will increase.

Once set, it's really easy!!

Customization

navigationOption: {
  headerTitle: "Mr&MrsSnapshot"
}

Or

tabBarOptions: { activeTintColor: 'tomato', inactiveTintColor: 'gray', }

Various customizations can be made by adding these.

Please create your own navigation while looking at the official page!

Here is the official page

Below is my code. Please use it as a reference.

import React from "react"
import { StyleSheet, Text, View } from "react-native"
import { createAppContainer } from "react-navigation"
import { createStackNavigator } from "react-navigation-stack"
import { createBottomTabNavigator } from "react-navigation-tabs"

import HomeScreen from "./src/screens/HomeScreen"
import ContentScreen from "./src/screens/ContentScreen"
import MyPageScreen from "./src/screens/MyPageScreen"

const HomeStack = createStackNavigator(
  {
    Home: { screen: HomeScreen },
    Content: { screen: ContentScreen }, // navigationOption: { headerTitle: 'Mr&MrsSnapshot' }
  },
  {
    defaultNavigationOptions: {
      headerTitle: "Mr&MrsSnapshot",
      headerTintColor: "black",
    },
  }
)

const SettingsStack = createStackNavigator(
  {
    // Home: { screen: HomeScreen },
    MyPage: { screen: MyPageScreen },
  },
  {
    defaultNavigationOptions: {
      headerTitle: "Mr&MrsSnapshot",
      headerTintColor: "black",
    },
  }
)

export default createAppContainer(
  createBottomTabNavigator(
    {
      Home: { screen: HomeStack },
      Settings: { screen: SettingsStack },
    },
    {
      // You can return any component that you like here!
      // Up to here header and more

      tabBarOptions: {
        activeTintColor: "tomato",
        inactiveTintColor: "gray",
      }, // Menu below
    }
  )
)

Summary

That's all.

I summarized about ReactNativeNavigation.

I hope this article can be helpful to someone.

For feedback or complaints, please contact via Twitter DM.

Please Provide Feedback
We would appreciate your feedback on this article. Feel free to leave a comment on any relevant YouTube video or reach out through the contact form. Thank you!