인스타그램 프로필 화면 같은 멀티 탭 만들기 - React Navigation 혹은 TabView를 ScrollView로 감싸지 마세요

React Navigation 혹은 TabView를 ScrollView로 감싸지 마세요

저는 이 행동으로 인해 오전을 날렸습니다.

https://github.com/satya164/react-native-tab-view

react native tab view의 github README에 보면 ScrollView로 감싸지 말라는 말이 있습니다. 읽어보니 최적화만 좀 안 되는 거라는 생각을 하게 됩니다. 일단 테스트니까 그냥 시도해보자고 생각할 지도 모르겠습니다. 하지만 그 순간 에러 지옥으로 빠지는 것입니다. 상단 탭바를 위해 react navigation의 material top navigator를 사용했습니다.

const Tab = createMaterialTopTabNavigator();

<ScrollView>
        <View style={commonStyle.horizaontal}>
          {/* 썸네일 */}
          {/* 썸네일 없으면 기본 icon 표시 */}
          <Image
            style={commonStyle.avatar}
            source={{
              uri: myInfo.thumbnail,
            }}
          />

          {/* 닉네임 */}
          <Text style={commonStyle.h1}>{myInfo.nickname}</Text>
        </View>
        {/* 전하는 메시지 */}
        <Text style={{ margin: 10 }}>{myInfo.message}</Text>
        <Button
          title="프로필 수정"
          onPress={() => {
            // params에 myInfo 전달
            navigation.navigate("ProfileEdit", { myInfo });
          }}
        />

        {/* <ProfileTab /> */}
        <Tab.Navigator>
          <Tab.Screen
            name="temp"
            component={TempScreen}
            options={{
              tabBarShowLabel: false,
              tabBarIcon: ({ forcused, color }) => {
                return <AntDesign name="switcher" size={23} color={color} />;
              },
            }}
          />
          <Tab.Screen
            name="temp2"
            component={HomeScreen}
            options={{
              tabBarShowLabel: false,
              tabBarIcon: ({ forcused, color }) => {
                return <AntDesign name="staro" size={23} color={color} />;
              },
            }}
          />
          <Tab.Screen
            name="temp3"
            component={SearchScreen}
            options={{
              tabBarShowLabel: false,
              tabBarIcon: ({ forcused, color }) => {
                return <AntDesign name="videocamera" size={23} color={color} />;
              },
            }}
          />
        </Tab.Navigator>
      </ScrollView>

 

이 코드를 실행해보면 이렇게 탭바만 뜨고 내용은 하나도 안 뜨게 됩니다.

 

주의사항대로 ScrollView 대신 <>(Fragment)로 감싸봅니다.

<>
        <View style={commonStyle.horizaontal}>
          {/* 썸네일 */}
          {/* 썸네일 없으면 기본 icon 표시 */}
          <Image
            style={commonStyle.avatar}
            source={{
              uri: myInfo.thumbnail,
            }}
          />

          {/* 닉네임 */}
          <Text style={commonStyle.h1}>{myInfo.nickname}</Text>
        </View>
        {/* 전하는 메시지 */}
        <Text style={{ margin: 10 }}>{myInfo.message}</Text>
        <Button
          title="프로필 수정"
          onPress={() => {
            // params에 myInfo 전달
            navigation.navigate("ProfileEdit", { myInfo });
          }}
        />

        {/* <ProfileTab /> */}
        <Tab.Navigator>
          <Tab.Screen
            name="temp"
            component={TempScreen}
            options={{
              tabBarShowLabel: false,
              tabBarIcon: ({ forcused, color }) => {
                return <AntDesign name="switcher" size={23} color={color} />;
              },
            }}
          />
          <Tab.Screen
            name="temp2"
            component={HomeScreen}
            options={{
              tabBarShowLabel: false,
              tabBarIcon: ({ forcused, color }) => {
                return <AntDesign name="staro" size={23} color={color} />;
              },
            }}
          />
          <Tab.Screen
            name="temp3"
            component={SearchScreen}
            options={{
              tabBarShowLabel: false,
              tabBarIcon: ({ forcused, color }) => {
                return <AntDesign name="videocamera" size={23} color={color} />;
              },
            }}
          />
        </Tab.Navigator>
      </>

짜잔! 이제 탭바를 누르면 원하는 스크린이 나타납니다.

 

React navigation의 material tab들은 tabview에 종속되어 있습니다. 그래서 tabview에서도 ScrollView를 Fragment로 감싸기만 하면 원하는 대로 작동합니다. 직접 테스트해봤지만 포스트가 너무 길어질 거 같아 첨부는 하지 않았습니다.

 

희한한 것은 View 태그로 감싸도 상단 탭의 화면이 나오지 않는다는 것입니다. 되도록이면 Fragment <>로 감싸세요.

 

참고로 하단 탭은 react navigation의 하단 탭을 사용했습니다.

createBottomTabNavigator