React native issue 탭 네비게이션 헤더 문제.

탭 네비게이션의 경우 헤더가 생기지 않는다.

 

그렇기 때문에  스텍 네비게이터로 감싼것을  탭 네비게이션의 스크린에 추가를 해준다.

 

const Test_1 =createStackNavigator(
    {
        NotiMain: {
            screen: NotiMain
        },

        WriteBoard:{
            screen: WriteBoard
        }
    }


)

const Test_2 = createStackNavigator(

    {
        SuggestionsBoard: {
            screen: SuggestionsBoard
        },
        WriteBoard:{
            screen: WriteBoard
        }
    }

)

const Test_3 = createStackNavigator(

    {
        QnABoard: {
            screen: QnABoard
        },
        WriteBoard:{
            screen: WriteBoard
        }

    }

)
        


// Board2 탭 메뉴 뷰들 
const Board_TapView2 = createMaterialTopTabNavigator(
    {
        공지사항 :{
            screen:Test_1
        },
        건의사항:{
            screen:Test_2
        },
        자유게시판:{
            screen:Test_3
        }

     

    }, {
        //initialRouteName: 'NotiMain',
        tabBarOptions: {
            activeTintColor: 'white',
            inactiveTintColor: 'gray',
        },

        tabBarPosition:'bottom'
    }
)

그리고

 

각각의 컴포넌트에서

네비게이션 옵션을 주어 헤더의 이벤트를 처리 해준다.

 

import React, { Component } from 'react';
import { View, Text, StyleSheet,Image,TouchableHighlight,Switch, Button } from 'react-native'


class NotiMain extends Component{


    static navigationOptions = ({navigation}) => {

        return{
            title:'공지사항',

            // 헤더의 왼쪽에 버튼 만들기 
            headerLeft: () => (
                <TouchableHighlight
                    onPress={() => navigation.navigate('Main_View')}
                    style={{ marginLeft: 20 }}
                >
                    <Image source={require('../../../../ImageDir/back.png')}
                        style={{ width: 30, height: 30 }}
                    />

                </TouchableHighlight>
            ),


            headerRight: () =>(
                <TouchableHighlight
                    onPress={() => navigation.navigate('WriteBoard')}
                    style={{ marginRight: 20 }}
                >
                    <Image source={require('../../../../ImageDir/edit.png')}
                        style={{ width: 30, height: 30 }}
                    />

                </TouchableHighlight>
            ),

            // 헤더의 텍스트를 가운데로 정렬 
            headerTitleAlign: 'center',  
        }
    };
    
    


    // static navigationOptions =  {

    //     title:'공지사항',

    // };

    render(){

        return(
            <View>
                <Text>NotiMain</Text>
                <Button
                    title ="test"
                    onPress = {()=> this.props.navigation.navigate('Main_View')}
                />

            </View>
        )
    }

}


export default NotiMain

 

 

 

혹여나  다른 방법을 알고계신분 있다면, 

 

링크나 방법을 남겨주세요 ^^