The official website

Reactnavigation.org/docs/zh-Han…

First installation

npm install @react-navigation/native
Copy the code

The second step

The libraries we will install now arereact-native-gesture-handler, react-native-reanimated, react-native-screens and react-native-safe-area-context. Install these packages if you have not installed them before:

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
Copy the code

The third step

From React Native 0.60 and higher, linking is automatic. So you don’t need to run React – Native link. Starting with React 0.60 and later, the React – Native Link is automatically configured for you. You don’t need to manually configure it

If you’re on a Mac and your development environment is IOS, you’ll need to configure it manually. You’ll need InstallPods to do this, if you’ve installed Cocoapods, and then run the command

cd ios; pod install; 
Copy the code

The fourth step

(Android /app/build.gradle) (Android /app/build.gradle) (Android /app/build.gradle)

implementation 'androidx. Appcompat: appcompat: 1.1.0 - rc01'
implementation 'androidx. Swiperefreshlayout: swiperefreshlayout: 1.1.0 - alpha02'
Copy the code

Step 5

You need to introduce react-native Mouth-handler in your route configuration file, remember the top

import 'react-native-gesture-handler'; // top import * as React from'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      {/* Rest of your app code */}
    </NavigationContainer>
  );
}
Copy the code

Step 6

To start the routing configuration, first install the common createStackNavigator, which relies on @react-native community/ marshall-view, which was installed in step 2

npm install @react-navigation/stack
Copy the code

Just paste the code on the official website

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

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

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;
Copy the code
//index.js
import {AppRegistry} from 'react-native';
import App from './router';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
Copy the code

The largest crater

If you have a problem, like

  • hang
  • An error (object is null)

And debugging for a long time without results, reinstall the APP package, test, are tears ah T T

By the way, I would like to make a joke about react navigation. Can’t the react navigation be changed a little bit? I installed the 4.x version and I watched the 5.X version tune up and felt my IQ was being shown. I did it for about two hours

[Here’s a sad meme…]

And one last thing

Suggest 4.x version use, 5.x can learn to try (too TM pit, official use, you will crash, anyway I choose dog belt – -)