inflearn logo
강의

Course

Instructor

Hands-on React Native

10.9 :: Using Firestore

Top Tab 사용 관련 질문입니다!

287

Veronica

6 asked

0

안녕하세요,

사진 앱 외에 제가 원하는 앱을 구현하기 위해 강의를 많이 참고하고 있습니다!

하단탭을 사용하는 것까지는 강의와 동일합니다만, 홈 화면에서만 상단탭을 사용하려고 하고 있습니다.

React NavigationMaterial Top Tab Navigator를 사용했고, 그 과정에서 StatusBar 배경색이 회색으로 변경되어버렸습니다 ㅠㅠ... 아무리 배경 색을 바꾸어도 변경이 되지 않고 있는 상황입니다. (Android는 된 것으로 알고 있는데, iOS에서 계속해서 회색 배경으로 보입니다)

그리고 상단탭 하단의 리스트는 FlatList를 사용하였는데, 데이터 양이 적을 때에도 남은 배경색이 회색으로 보입니다 ㅠㅠ

1.png

처음에는 상단탭 아래쪽 화면(BoatListScreen) 부분에 flex:1을 줘서 배경색을 늘려보았지만, 그렇게 하니 상단탭 아래에 있는 ScrollView(시흥 등 버튼이 있는)에 적용했던 높이값이 이상해져서 세로로 늘어나게 되어버리는 현상이 발생합니다.

2.png

HomeScreen 에서 TopTab을 바로 불러오게 했는데 이게 문제인걸까요? ㅠㅠ

강의 내용과는 좀 다른 부분이긴 하지만 한번 질문드려봅니다..!!

react-native

Answer 1

0

beomjun

안녕하세요,

 

강의 내용을 벗어난 질문에 대한 답변은 하지 않고 있습니다.

 

간단하게 몇가지 말씀드리면,

  1. 내비게이터(Navigator) 컴포넌트를 화면(-Screen.js) 파일에서 불러오지 말고, navigations 폴더에 작성한 내비게이터(ex. MainStack.js) 파일에서 불러오세요.

  2. Top Tab의 위치가 어디가 되어야 할 지 고민해보세요. 조금 더 정확하게는 "누구의 자식 컴포넌트로 사용되어야 할지" 생각해 보세요.

  3. 각 화면이 차지하는 영역이 화면 전체가 아닐 수 있습니다. 화면 디자인에 따라 차이가 있겠지만, 현재 화면이 화면 전체를 차지하도록 만드세요.

  4. 프로젝트 디자인에 따라 다르겠지만, Bottom Tab과 Top Tab을 반드시 함께 사용해야 하는 것이 아니라면, 둘 중 하나만 사용하는 것을 추천합니다. 현재 글에서 보이는 스크린샷을 바탕으로 생각해보면, Bottom Tab을 사용하고 Top Tab은 FlatList를 가로로 사용하는 것이 조금 더 좋을것 같습니다. FlatList를 가로로 사용하는 예시는 강의 10.23에서 확인할 수 있습니다.

 

0

Veronica

곤란하셨을텐데 조언 감사드립니다!

말씀해주신 내용들 참고해서 수정해보겠습니다! 🙂

expo 가 업데이트 되면서 문제가 발생한거같습니다.

0

343

2

navigation.replace() 작동하지 않습니다.

0

147

2

UpdateProfileScreen 에서 사진 버튼 클릭시 오류발생.

0

132

2

닉네임 수정 후 확인 버튼을 누를시 한글자만 출력됩니다.

0

177

2

모달창에서 버튼이 출력되지 않습니다.

0

104

2

로그인 에러 출력시 default값만 나옵니다.

0

144

2

안드로이드 기기에서 SignUp 화면 관련 질문드립니다.

0

86

2

간단한 질문 하나만 드리겠습니다!

0

77

2

text.trim() 부분에서 오류가 발생합니다.

0

124

2

profile 화면에서 내가 쓴 글이 나타나지 않습니다.

0

142

2

글 저장시 파일 저장위치 관련 질문드립니다!

0

111

2

구글 지도 API 관련 오류로 질문드립니다!

0

142

1

HeaderRight 버튼이 작동하지 않습니다.

0

88

2

사진이 나오지 않는 문제로 질문드립니다.

0

113

2

defaultProps 관련 문의 드립니당

0

244

2

이미지 목록을 받아오는 부분에서 IOS 에서 문제가 발생합니다.

0

129

2

안드로이드 기기에서 헤더 부분이 작동이 안됩니다.

0

87

2

[TypeError: unsubscribe is not a function (it is undefined)] 오류 발생으로 질문드립니다.

0

108

2

7.15 :: 상태 변수와 컴포넌트 언마운트 관련 질문드립니다!

0

98

2

SIgnIn SignUp 화면이 안나옵니다.

0

126

2

마지막 useEffect 부분 질문드립니다.

0

100

2

ImagPickerScreen을 만드는 과정에서 문제가 발생하여 글을 남깁니다.

0

209

2

eslint.config.mjs 파일에 plugin 설정방법

0

747

1

ESLint.json 파일이 생성되지 않습니다.

0

237

2