[React Native] 헤더 스타일 수정하기(Navigation Header)

https://reactnavigation.org/

navigation은 위 라이브러리를 사용했다

 

<Stack.Screen
    options={{
        headerTitle: '스터디 모집 게시판',
        headerRight: () => (
            <View style={{ flexDirection: 'row' }}>
                <TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center', marginHorizontal: 10 }}
                    onPress={() => navigation.navigate('Search')}>
                    <FontAwesome name="search" size={18} color="#000000" style={{ marginRight: 5 }} />
                </TouchableOpacity>
            </View>
        )
    }}
    name='Board'
    component={boardList}
/>
<Stack.Screen
    name='Search'
    component={searchScreen}
/>

원래는 이런 식으로 Navigation Screen들을 나열할 때 헤더를 설정해 줄 수 있다

하지만 검색 버튼을 누르면 검색창으로 이동해야 했는데 저 위치에서는 navigation을 이용해 search 페이지로 이동할 수 없기 때문에, useEffect를 사용해서 boardList component 내에서 헤더를 설정해 주었다

 

const boardList = ({ navigation }) => {

    useEffect(() => {
        navigation.setOptions({
            headerTitle: '스터디 모집 게시판',
            headerTitleStyle: {
                fontFamily: 'Pretendard-Bold',
                fontSize: 18,
                ...Platform.select({
                    android: { marginLeft: 10 }
                })
            },
            headerShadowVisible: false,
            headerRight: () => (
                <View style={{ flexDirection: 'row' }}>
                    <TouchableOpacity style={{ justifyContent: 'center', alignItems: 'center', marginHorizontal: 10 }}
                        onPress={() => navigation.navigate('Search')}>
                        <FontAwesome name="search" size={18} color="#000000" style={{ marginRight: 5 }} />
                    </TouchableOpacity>
                </View>
            )
        });
    }, [navigation]);

위와 같은 식으로 컴포넌트 내부에서도 헤더 설정이 가능하다

헤더는 headerTitle, headerLeft, headerRight로 나뉘며, 말 그대로 중간에 오는 제목, 헤더의 왼쪽, 헤더의 오른쪽에 오는 요소를 직접 설정해 줄 수 있다

 

* headerTitle의 경우 안드로이드에서는 좌측 정렬된 형태이지만, ios에서는 가운데 정렬된 형태이다. 따라서 위 코드처럼 titleStyle에 marginLeft 등을 넣어주게 되면 ios에서 정렬이 이상하게 보일 수 있으니 플랫폼을 나눠서 넣어줘야 한다(안드로이드는 android, ios는ios로 작성해 주면 된다)

 

이때 headerTitle은 꼭 string 형태가 아니어도 되고, 그냥 컴포넌트 자체를 전달해 줄 수도 있다

검색버튼을 눌렀을 때 헤더의 모습인데

headerTitle: () => (
    <View style={{ flex: 1, width: 300, marginVertical: 10 }}>
        <TextInput
            placeholder='검색어를 입력하세요.'
            style={boardStyle.SearchInputContainer}
        />
    </View>
)

headerTitle을 이런 식으로 작성해 주면 된다