React Navigation导航库的详细解说

大家好，我是Takubii（@takubii）。
我想要解释一下在React Native中非常便捷的React Navigation，它非常有用于屏幕间的切换。
虽然React Navigation本身不仅适用于React Native，但它提供了多种多样的切换方法，因此是一个非常方便的库。
这次我们将专注于其中最基本的屏幕切换方法。

开发环境

这次的代码是在以下环境中执行的。

• React native 0.72.6

React navigation 6.1.8

安装React Navigation

我们将在已经创建了React Native环境的前提下继续进行。

首先，我们将安装React Navigation。

npm install @react-navigation/native

我将安装所依赖的库。

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

最后执行Pod安装。

cd ios && pod install && cd ..

请参考以下官方网站以获取详细信息。

源代码的实现

这次我们将使用Stack导航。这个功能用于页面跳转，头部会显示返回按钮，手机上可以通过手势返回前一个页面。

在React Navigation中，每个要使用的导航器都需要安装。因此，需要安装以下包。

npm install @react-navigation/native-stack

我们将在本次实现中，从认证页面进行认证，然后在主页上添加到详细页面的链接。首先，我们会创建一个用于管理认证状态的上下文。

建立用于管理认证状态的上下文。

AuthContext.tsx:

身份验证上下文.tsx

import React, {ReactNode, createContext, useContext, useState} from 'react';

type AuthContextType = {
  isAuthenticated: boolean;
  setIsAuthenticated: React.Dispatch<React.SetStateAction<boolean>>;
};

type AuthProviderProps = {
  children: ReactNode;
};

const AuthContext = createContext<AuthContextType | undefined>(undefined);

export const AuthProvider: React.FC<AuthProviderProps> = ({children}) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <AuthContext.Provider value={{isAuthenticated, setIsAuthenticated}}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = (): AuthContextType => {
  const context = useContext(AuthContext);

  if (!context) {
    throw new Error('useAuthはAuthProviderと一緒に使ってください。');
  }

  return context;
};

随后，将创建认证画面、主页画面和详情画面。

創建驗證畫面、主頁畫面和詳細畫面。

AuthScreen.tsx: 身份验证屏幕.tsx

import React from 'react';
import {Button, StyleSheet, View} from 'react-native';

import {useAuth} from '../hooks/AuthContext';

export const AuthScreen: React.FC = () => {
  const {setIsAuthenticated} = useAuth();

  return (
    <View style={styles.container}>
      <Button title="ログイン" onPress={() => setIsAuthenticated(true)} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

主屏幕.tsx

import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';

import {NativeStackScreenProps} from '@react-navigation/native-stack';

import {RootStackParams} from '../App';
import {Header} from '../components/Header';
import {useAuth} from '../hooks/AuthContext';

export const HomeScreen: React.FC<
  NativeStackScreenProps<RootStackParams, 'Home'>
> = ({navigation}) => {
  const {setIsAuthenticated} = useAuth();

  return (
    <View style={styles.container}>
      <Header />
      <View style={styles.main}>
        <Text>ホーム画面</Text>
        <Button
          title="詳細画面へ"
          onPress={() => navigation.navigate('Details')}
        />
        <Button title="ログアウト" onPress={() => setIsAuthenticated(false)} />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
  },
  main: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

详情屏幕.tsx：

import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';

import {NativeStackScreenProps} from '@react-navigation/native-stack';

import {RootStackParams} from '../App';
import {Header} from '../components/Header';

export const DetailsScreen: React.FC<
  NativeStackScreenProps<RootStackParams, 'Details'>
> = ({navigation}) => {
  return (
    <View style={styles.container}>
      <Header />
      <Text>詳細画面</Text>
      <Button title="戻る" onPress={() => navigation.goBack()} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

最后，在App.tsx文件中进行Navigator的配置。

导航和认证流程的控制

App.tsx：

import React from 'react';

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

import {AuthProvider, useAuth} from './hooks/AuthContext';
import {AuthScreen} from './screens/AuthScreen';
import {DetailsScreen} from './screens/DetailsScreen';
import {HomeScreen} from './screens/HomeScreen';

export type RootStackParams = {
  Auth: undefined;
  Home: undefined;
  Details: undefined;
};

const Stack = createNativeStackNavigator<RootStackParams>();

const App: React.FC = () => {
  return (
    <AuthProvider>
      <NavigationContainer>
        <NavigationContent />
      </NavigationContainer>
    </AuthProvider>
  );
};

const NavigationContent: React.FC = () => {
  const {isAuthenticated} = useAuth();

  return (
    <Stack.Navigator>
      {!isAuthenticated ? (
        <>
          <Stack.Screen name="Auth" component={AuthScreen} />
        </>
      ) : (
        <>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Details" component={DetailsScreen} />
        </>
      )}
    </Stack.Navigator>
  );
};

export default App;

总结

我简要介绍了React Navigation。
Navigator具有各种类型，从汉堡菜单到选项卡列表切换等功能都可以实现。
此外，由于它们可以组合在一起，所以在希望实现复杂的屏幕切换时非常有用。

那么，这次就在这附近结束吧。
感谢您阅读完这篇文章。
如果有机会，再见面吧。