react-native 해더 중앙 정렬 및 버튼

    static navigationOptions = {

        // 헤더의 오른쪽에 버튼 만들기
        headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
        ),

        // 헤더의 왼쪽에 버튼 만들기 
        headerLeft: () => (
            <Button
                onPress={() => alert('This is a button!')}
                title="Info"
                color="#fff"
            />
        ),

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

 

 

또는

 

해더 자체에  컴포넌트를 넣을 수 있다 ,

 

   static navigationOptions = {

        headerTitle: () => <Title/>,

    };

 

 

class Title extends Component {

    render(){
        return(
            <View style = {Headerstyle.H_container}>

                <Button
                    onPress={() => alert('This is a button!')}
                    title="Info"
                    color='blue'
                />

                <Text>
                    홈
                </Text>
            </View>
        )
    }
}

const Headerstyle = StyleSheet.create({

    H_container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        backgroundColor:'red',
        alignSelf:'stretch',
        flexDirection:'row',

    }

})