Chat App (2) : Auth 화면 구성

Sang heon lee·2022년 6월 16일

처음 배우는 리액트 네이티브

목록 보기

15/22

1. themeProvider로 제공하는 theme(themeContext)을 useContext로 가져온다.

// src//navigations/Auth.tsx

import React, { useContext } from 'react';
import { ThemeContext } from 'styled-components';
import { createStackNavigator } from '@react-navigation/stack';
import { Signup, Signin } from '../screens';
import { MaterialIcons } from '@expo/vector-icons';

// screen 추가 될 때 마다 추가
export type AuthStackParamList = {
  Signin: undefined;
  Signup: undefined;
};

const Stack = createStackNavigator<AuthStackParamList>();

const Auth = () => {
  const theme = useContext(ThemeContext); // ⭐️⭐️⭐️⭐️

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Signin"
        component={Signin}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Signup"
        component={Signup}
        options={{
          headerTitleAlign: 'center',
          headerBackTitleVisible: false,
          headerTintColor: theme.text,  // ⭐️⭐️⭐️⭐️
          headerLeft: ({ tintColor, onPress }) => {
            return (
              <MaterialIcons
                name="keyboard-arrow-left"
                size={38}
                color={tintColor}
                onPress={onPress}
              />
            );
          },
        }}
      />
    </Stack.Navigator>
  );
};

export default Auth;