preface

This article is taken from the official Api documentation and covers only the basics. For more information, go to React – Navigation

Depend on the installation

yarn add @react-navigation/native
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
yarn add @react-navigation/stack
Copy the code

Note: Starting with React Native 0.60 and later, linking is automatic. No need to run the React-native link.

use

Routing hop

// In App.js in a new project

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen ({ navigation }) {
  return (
    <View style={{ flex: 1.alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home page</Text>
      <Button title="Skip to details" onPress={()= > navigation.navigate('Details')}
      />
    </View>
  );
}
function DetailsScreen ({ navigation }) {
  return (
    <View style={{ flex: 1.alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details page</Text>
      <Button title="Open new details page" onPress={()= > navigation.push('Details')}
      />
      <Button title="Jump to home page" onPress={()= > navigation.navigate('Home')} />
      <Button title="Return to the previous level" onPress={()= > navigation.goBack()} />
      <Button title="Back to top page" onPress={()= > navigation.popToTop()}
      />
    </View>
  );
}

const Stack = createStackNavigator();

function App () {
  return (
    <NavigationContainer>
      <Stack.Navigator>{/* The first page is the top-level page, and */} is displayed first by default.<Stack.Screen name="Home" component={HomeScreen} options={{ title:}} />
        <Stack.Screen name="Details" component={DetailsScreen} options={{ title:'Detail title'}} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
Copy the code

1. Navigation. Navigate (‘ XXXX ‘) to the specified page. If the page is on the stack, close the current page and jump over. If the current page is the one to jump to, no response is received.

2. Navigation. Push (‘ XXXX ‘) inserts a page into the stack, regardless of whether the page already exists on the stack.

3. Navigation. GoBack () returns to the previous level

4. Navigation. PopToTop () returns to the top-level page

Routing and the cords

Passing parameters

navigation.navigate('DetailsScreen', {
  itemId: 86.otherParam: 'anything you want here'});Copy the code

Accept parameters

function DetailsScreen({ route }) {
// Receive parameters
  const { itemId, otherParam } = route.params;
  return (
    <View>.</View>
  );
}
Copy the code

Setting default Parameters

<Stack.Screen
  name="Details"
  component={DetailsScreen}
  initialParams={{ itemId: 42}} / >Copy the code

Route head (navigation head) setting

Basic configuration of navigation head

<Stack.Screen name="Details" component={DetailsScreen} options=
  {{
  	headerShown: true // Whether to display the header navigation bar. Default is true
	title: 'Details Page'.// Navigation title
	headerStyle: {
		backgroundColor: '#f4511e'.// Navigation background color
	},
	headerTintColor: '#fff'.// Navigation text color
	headerTitleStyle: {
		fontWeight: 'bold'.// Use bold navigation text
		fontSize: 15 // Navigation text size
	}
  }}
/>
Copy the code

Dynamically set the navigation header

navigation.setOptions({ title: 'Updated! ' })
Copy the code

Custom navigation header

function LogoTitle() {
  return (
    <Image
      style={{ width: 50.height: 50 }}
      source={require(The '@expo/snack-static/react-native-logo.png')} / >
  );
}
function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ headerTitle: props= > <LogoTitle {. props} / >}} / ></Stack.Navigator>
  );
}
Copy the code

Custom navigation header button

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerRight:() = > (
            <Button
              onPress={()= >alert('This is a button! ')} title=" color="# FFF "/>,}} /></Stack.Navigator>
  );
}
Copy the code

Bottom Tab navigation

Depend on the installation

yarn add @react-navigation/bottom-tabs
Copy the code

The basic use

// in your RootPage.js
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// There are three TAB pages
import HomePage from '.. /page/HomePage';
import ListPage from '.. /page/ListPage'
import MyPage from '.. /page/MyPage'

const Tab = createBottomTabNavigator();
export default function TabNav () {
  return (
    <Tab.Navigator
      tabBarOptions={{
        activeTintColor: 'tomato', / /tabColor when selectedinactiveTintColor: 'gray' // tabUnselected color}} >
      <Tab.Screen name="Home" component={HomePage} />
      <Tab.Screen name="List" component={ListPage} />
      <Tab.Screen name="MyCenter" component={MyPage} />
    </Tab.Navigator>
  );
}
Copy the code
// in your App.js
import * as React from 'react';
import { NavigationContainer, getFocusedRouteNameFromRoute } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// Introduce the TAB page and one other page
import TabNav from './RootPage/RootPage'
import Details from './page/Details'
const Stack = createStackNavigator();
// To change the parent headerTitle in tab. Navigator, use this method
function getHeaderTitle (route) {
  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';
  switch (routeName) {
    case 'Home':
      return 'home';
    case 'List':
      return 'list';
    case 'MyCenter':
      return 'Personal Centre'; }}function App () {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="TabNav" component={TabNav} options={({ route}) = > ({
          headerTitle: getHeaderTitle(route)
        })} />
        <Stack.Screen name="Details" component={Details} options={{ title:'details',headerShown: false}} / >
      </Stack.Navigator>
    </NavigationContainer>)}export default App;
Copy the code

. To be continued