<TIL> React-Navigation header 꾸미기 - Trello(9)

React-Nativgation을 사용하면 자동으로 header를 생성해 준다

Stack같은 경우에는 화면이 쌓이게 되면 뒤로 가기 버튼도 알아서 생겨서 간단한 헨더를 구성할 때에는 그냥 써도 된다.

하지만 헤더에 여러기능을 추가 하고 싶거나 꾸미고 싶다면 원하는 기능을 넣은 component를 header에 적용할 수 있습니다.

 

Nav.js//라우터를 정의해 놓은 파일
...
import CPHs from './utils/CreatePageHeaders';


function StackHome() {
  return (
    <Stack.Navigator>
      <Stack.Screen
      name="Home"
      component={Home}
      options={{ headerTitle: (props) => <CPHs {...props} title="Home" /> }} />
      <Stack.Screen name="InBoard" component={InBoard} options={{ headerTitle: (props) => <CPHs {...props} /> }} />
      <Stack.Screen name="MakeBoard" component={MakeBoard} options={({ navigation }) => ({ headerTitle: (props) => <CPHs {...props} title="create Board" create="Board" navigation={navigation} /> })} />
      //navigation의 기능을 header에 props로 넘겨주기 위하여 사용하였습니다. 
      <Stack.Screen name="MakeCard" component={MakeCard} options={({ navigation }) => ({ headerTitle: (props) => <CPHs {...props} title="create Card" create="Card" navigation={navigation} /> })} />
    </Stack.Navigator>
  );
} 

class Nav extends Component {
 ... 생략..

render() {
    return (
      <NavigationContainer>
      <SafeAreaProvider>
        { this.props.Login ? (
            <Drawer.Navigator>
                <Drawer.Screen name="Home" component={StackHome} />
                <Drawer.Screen name="Boards" component={StackBoard} />
                <Drawer.Screen name="UserInfo" component={UserPage} />
            </Drawer.Navigator>
        ) : (
          <Stack.Navigator screenOptions={{
            headerShown: false,
          }}>
              <Stack.Screen name="First" component={First} />
              <Stack.Screen name="Signup Screen" component={Signup} />
              <Stack.Screen name="Login Screen" component={Login} />
          </Stack.Navigator>
        )}
      </SafeAreaProvider>
      </NavigationContainer>
    );
  }}
})

...Redux

const mapStateToProps = ...;
const mapDispatchToProps = ...;

export default connect(mapStateToProps, mapDispatchToProps)(Nav);

...CreatePageHeaders.js

import React, { Component } from 'react';
import {
  View, Text, AsyncStorage, TouchableOpacity, StyleSheet,
} from 'react-native';
import { connect } from 'react-redux';
import { Icon } from 'react-native-elements';
import axios from 'axios';
import { LogoutAuth } from '../Redux/Reducer';
import { server } from './server';

class Header extends Component {

  logout = async () => {
    await AsyncStorage.removeItem('user_Token');
    this.props.logout();
  };

  boardCreate() {
    const { boardTitleObj } = this.props;
    //MakeBoard.js에서 입력한 Board title을 가져옵니다.
    
    axios.post(`${server}/board/create`,boardTitleObj, { headers: { authorization: this.props.token } );
    .then(Res => {
    	if(Res.status === 200)
        //서버의 응답이 오면 만들어진 보드 안으로 들어갑니다.
    	this.props.navigation.navigate('InBoard', { id: Res.data.id, name: Res.data.title });
    })
  }

  cardCreate() {
   ...boardCreate와 유사
  }

  render() {
    const { create, board } = this.props;
    return (
            <View style={styles.headerTotal}>
              <View style={styles.headerLeft}>
                <Text>
                {this.props.title}
                </Text>
              </View>
                {create
                  ? (
                    <TouchableOpacity
                    style={styles.logout}
                    onPress={() => (create ? this.boardCreate() : this.cardCreate())}>
                      <Icon type="material" name="done" />
                    </TouchableOpacity>
                  )
                  : (
                  <TouchableOpacity
                    style={styles.headerRight}
                    onPress={this.logout}>
                    <Text>
                    logout
                    </Text>
                  </TouchableOpacity>
                  ) }
            </View>
    );
  }
}
const styles = StyleSheet.create({
 ...
});


const mapStateToProps = ... ; 
const mapDispatchToProps = ... ; 

export default connect(mapStateToProps, mapDispatchToProps)(Header);

TrelloW 프로젝트 같은 경우에는

Board와 Card를 만드는 페이지의 헤더는 체크 버튼을 누를 시에 서버와 통신을 하는 과정이 필요하기 때문에 

MakeBoard component에서 입력한 데이터를 Redux를 이용하여 가져와
header에 done 아이콘을 누르면 서버에 요청을 보내는 방식으로 구현하였습니다.