[Stack] Header Bar 커스터마이징은 안드로이드는 안되... - 인프런

iOS/Android 앱 개발을 위한 실전 React Native - Basic

[Stack] Header Bar 커스터마이징

[Stack] Header Bar 커스터마이징은 안드로이드는 안되는 건가요 ? ㅜㅜ

작성

229

[Stack] Header Bar 커스터마이징은 안드로이드는 안되는 건가요 ? ㅜㅜ

답변 3

지식공유자

권현서님,

안녕하십니까. 지식공유자 Wintho입니다.

질문 주신 내용에 대한 답변 드리겠습니다.

iOS보다 성가시긴 하지만 안드로이드도 header bar configuring이 가능합니다.

headerTitle: <LogoTitle/>
이 아니라,
headerTitle: props => <LogoTitle {...props}/>
로 시도해보시길 바라며,

안드로이드는 ios처럼 headerTitle이 default로 가운데 정렬이 되지 않습니다.

따라서, logo.js 파일에서 Image 태그의 style에 alignSelf: 'center'를 추가해주시기 바랍니다.

@logo.js

...

render () {

return (

<Image

style={{width: 40, height: 40, alignSelf: 'center'}}

source={Logo}

)

}
...

감사합니다.

logo.js에서 class 사용할 때, 해결 방법 아시는 분 있나요, 일단 logo.js에서 function 으로 사용하니 되네요....

          <Stack.Screen

            name="Home"

            component={HomeScreen}

            options={{

              title: 'Home Screen',

              // headerTitle: <this.logoTitle/>

              headerTitle: () => ( // App Logo

                <Image

                  style={{ width: 40, height: 40 }}

                  source={require('./src/assets/pics/home_icon.png')}

/>

)

}}

/>

함수를 만들어서 하면 되는데 호출해서 하면 안되네요.

저도 이유를 모르겠습니다.

headerTitle: props => <this.logoTitle/>

이렇게 해주니 되네요 