[React Native] 이중 Navigation Container / Keyboard tabBar Options

 

이중 Navigation Container 해결 

각자 만든 파일을 합치려다 보니 각각 만든 NavigationContainer / Nvigator 가 존재해서 이중 오류가 떴다 

가장 최상위 Component 말고 그 안에 감싸져있는 NavigationContainer 에 아래 옵션을 넣어주면 해결! 

independent={true}

 

 

Keybaord 에 TabBar가 함께 뜨는 경우 -> TabBar 없애기 

TextInput 등 Keyboard 사용하는 element 를 감싸는 Tabs.Navigator 에 아래 옵션 넣기 

tabBarOptions={{keyboardHidesTabBar:true}}

 

ex) 

//MainApp로 이름 변경
export default function MainApp({navigation}) {
  return (
    <NavigationContainer independent={true}>
      <Tabs.Navigator tabBarOptions={{keyboardHidesTabBar:true}}>
        <Tabs.Screen 
          name="YourwordsTab"

 

 

-> ERROR : tabBarOptions 을 screenOptions으로 이용하라는 오류가 뜸 

 

위의 코드처럼 바꾸주기 ! 

export default function MainApp({navigation}) {
  return (
    <NavigationContainer independent={true}>
      <Tabs.Navigator screenOptions={{
        tabBarHideOnKeyboard:true,
        tabBarStyle:[
          {
            display:'flex'
          },
          null
        ]
      }}>