expo中使用react navigation 6.x笔记

新版本react navigation 6.x，与5.x有什么区别呢？记个笔记吧！

环境 条目版本expo-cli4.10.0React Navigation6.x笔记日期2021年8月21日

• react navigation 6.x官方文档 https://reactnavigation.org/docs/getting-started/

• expo官方文档 https://docs.expo.dev/index.html

安装依赖

最近越来越喜欢yarn了，这里就使用yarn为例。

在 React Native 项目中安装所需的包：

yarn add @react-navigation/native

在expo中执行以下：

expo install react-native-screens react-native-safe-area-context

安装 native stack navigator library

yarn add @react-navigation/native-stack

示例：导航到一个新的屏幕

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

function HomeScreen({ navigation }) {
  return (
    
      首页
       navigation.navigate('Details')}
      />
    
  );
}

function DetailsScreen() {
  return (
    
      Details Screen
    
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    
      
        
        
      
    
  );
}

export default App;

Tab navigation

安装依赖

yarn add @react-navigation/bottom-tabs

范例

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    
      Home!
    
  );
}

function SettingsScreen() {
  return (
    
      Settings!
    
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    
      
        
        
      
    
  );
}

Drawer navigation

安装依赖

#有依赖关系
expo install react-native-reanimated
expo install react-native-gesture-handler
yarn add @react-navigation/drawer

范例

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen({ navigation }) {
  return (
    
       navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    
  );
}

function NotificationsScreen({ navigation }) {
  return (
    
       navigation.goBack()} title="Go back home" />
    
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    
      
        
        
      
    
  );
}

总结

我目前使用的功能，对比react navigation 5.x没感觉到明显的差别。