Detailed explanation of the basic use of react-navigation6.x routing library

npx react-native init testRN

yarn android

yarn start

yarn add @react-navigation/native react-native-screens react-native-safe-area-context @react-navigation/native-stack

  import android.os.Bundle;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }

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

function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    // NavigationContainer is a container for routes, put all related content in it <NavigationContainer>
      <Stack.Navigator>
        {/* Stack.Screen is the routed window, name sets the window name for jump, and the component content of the window is placed in component */}
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

import * as React from 'react';

// Add Button
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
                    
                // Add navigation parameter function HomeScreen({navigation}) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      {/* Add jump button */}
      <Button
        title="Go to Details"   
        // navigation.navigate('Details') is used to jump, where Details points to the corresponding window name
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    // NavigationContainer is a container for routes, put all related content in it <NavigationContainer>
      <Stack.Navigator>
        {/* Stack.Screen is the routed window, name sets the window name for jump, and the component content of the window is placed in component */}
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'my home'}} />

<Stack.Screen name="Details" component={DetailsScreen}
   options={({ route }) => ({ title: route.params.title })}
/>

<Button
   title="Go to Details"
  // navigation.navigate('Details') is used to jump, where Details points to the corresponding window name
   onPress={() => navigation.navigate('Details', { title: 'Secondary Page' })}
/>

<Button
   title="Update the title"
   onPress={() => navigation.setOptions({ title: 'Updated!' })}
/>

function LogoTitle() {
  return (
    <Image
      style={{ width: 50, height: 50 }}
      source={require('./src/img/details.png')}
    />
  );
}

<Stack.Screen name="Home" component={HomeScreen}
   options={{
     title: 'My home',
     headerTitle: (props) => <LogoTitle {...props} />
   }}
/>

        <Stack.Screen name="Home" component={HomeScreen}
          options={{
            title: 'My home',
            headerTitle: (props) => <LogoTitle {...props} />,
            headerRight: () => (
              <Button
                onPress={() => alert('This is a button!')}
                title="Info"
                color="#fff"
              />
            ),
          }}
        />

        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => (
            {
              title: route.params.title,
              headerBackImageSource: detailsImg,
            }
          )}
        />