React Native로 다양한 메뉴가 있는 앱 만들기
최종형
다음 동영상처럼 보입니다.
이러한 여러 화면 패턴을 가진 앱을 구현합니다.
네비게이터 구성
이번 구현에서는 React Navigation 을 사용하고 있습니다.
버전은 v5입니다.
슬라이드 메뉴(Drawer), 팝업 화면은 탭 메뉴에 가려지는 형태로 구현하고 싶으므로,
DrawerNavigator > StackNavigator > TabNavigator 구성으로 구현합니다.
각각의 내용을 봅니다.
DrawerNavigator
const DrawerNavigator = () => {
return (
<Drawer.Navigator
drawerContent={() => (
<View style={styles.container}>
<Text>Drawer</Text>
</View>
)}
>
<Drawer.Screen name="StackNavigator" component={StackNavigator} />
</Drawer.Navigator>
);
};
화면은 하나의 정의이며 StackNavigator를 호출합니다.
이렇게 하면 StackNavigator의 내용이 자동으로 표시됩니다.
Drawer 의 표시 내용은 drawerContent 에 정의합니다.
StackNavigator
const StackNavigator = () => {
const navigation = useNavigation();
return (
<Stack.Navigator mode="modal" headerMode="screen">
<Stack.Screen
name="TabNavigator"
component={TabNavigator}
options={{ headerShown: false }}
/>
<Stack.Screen
name="ModalScreen"
component={ModalScreen}
options={{
headerLeft: () => (
<HeaderBackButton
labelVisible={false}
backImage={() => (
<View style={{ paddingHorizontal: 8 }}>
<Icon name="md-close" style={{ fontSize: 18 }} />
</View>
)}
onPress={() => navigation.goBack()}
/>
),
}}
/>
</Stack.Navigator>
);
};
TabNavigator 및 팝업 화면을 정의합니다.mode="modal" 의 경우는 아래에서 떠오르는 형태로, mode="card" 의 경우는 오른쪽으로부터 밀어내도록(듯이) 화면이 삽입됩니다.
TabNavigator 와 같은 계층구조에 ModalScreen 를 배치하는 것으로, 팝업 화면이 탭에 숨기지 않게 하고 있습니다.
TabNavigator
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Tab1" component={TabScreen1} />
<Tab.Screen name="Tab2" component={TabScreen2} />
<Tab.Screen name="Tab3" component={TabScreen3} />
</Tab.Navigator>
);
};
앱에서 호출
const App: React.FunctionComponent = () => {
return (
<NavigationContainer>
<DrawerNavigator />
</NavigationContainer>
);
};
NavigationContainer 의 자식 요소로서 DrawerNavigator 를 호출합니다.
이것으로 완성입니다.
결론
React Navigation에서는 어느 Navigator를 상위로 할지에 따라 거동이 다릅니다.
이번에 소개한 것처럼, 가려지는 팝업 화면도 구현할 수 있고, 한편으로 선택 탭내에서 상세 화면 등의 다른 화면을 표시하는 것도 가능합니다. (이 경우 탭 메뉴가 숨어 있지 않습니다)
어떤 화면 구성을 원하는지 디자인하고 어떤 페이지를 어떤 네비게이터에 배치할지 고려해야 합니다.
이번에는 간단하지만 구현 방법을 소개했습니다.
불명점이나 실수 등이 있으면 코멘트 부탁드립니다.
여기까지 읽어 주셔서 감사합니다.
const DrawerNavigator = () => {
return (
<Drawer.Navigator
drawerContent={() => (
<View style={styles.container}>
<Text>Drawer</Text>
</View>
)}
>
<Drawer.Screen name="StackNavigator" component={StackNavigator} />
</Drawer.Navigator>
);
};
const StackNavigator = () => {
const navigation = useNavigation();
return (
<Stack.Navigator mode="modal" headerMode="screen">
<Stack.Screen
name="TabNavigator"
component={TabNavigator}
options={{ headerShown: false }}
/>
<Stack.Screen
name="ModalScreen"
component={ModalScreen}
options={{
headerLeft: () => (
<HeaderBackButton
labelVisible={false}
backImage={() => (
<View style={{ paddingHorizontal: 8 }}>
<Icon name="md-close" style={{ fontSize: 18 }} />
</View>
)}
onPress={() => navigation.goBack()}
/>
),
}}
/>
</Stack.Navigator>
);
};
const TabNavigator = () => {
return (
<Tab.Navigator>
<Tab.Screen name="Tab1" component={TabScreen1} />
<Tab.Screen name="Tab2" component={TabScreen2} />
<Tab.Screen name="Tab3" component={TabScreen3} />
</Tab.Navigator>
);
};
const App: React.FunctionComponent = () => {
return (
<NavigationContainer>
<DrawerNavigator />
</NavigationContainer>
);
};
React Navigation에서는 어느 Navigator를 상위로 할지에 따라 거동이 다릅니다.
이번에 소개한 것처럼, 가려지는 팝업 화면도 구현할 수 있고, 한편으로 선택 탭내에서 상세 화면 등의 다른 화면을 표시하는 것도 가능합니다. (이 경우 탭 메뉴가 숨어 있지 않습니다)
어떤 화면 구성을 원하는지 디자인하고 어떤 페이지를 어떤 네비게이터에 배치할지 고려해야 합니다.
이번에는 간단하지만 구현 방법을 소개했습니다.
불명점이나 실수 등이 있으면 코멘트 부탁드립니다.
여기까지 읽어 주셔서 감사합니다.
Reference
이 문제에 관하여(React Native로 다양한 메뉴가 있는 앱 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/dhythm/items/24ba7b41470c29c7ea52텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
