화면의 구조를 설계하는 네비게이션 – 안드로이드 스터디
안드로이드 공부를 하기로 결심하고 나서 가장 먼저 해야할 일은 화면의 구조를 설계하는 일이었다.
내가 어떤 화면에서 하단에 탭을 보여주고, 어떤 화면에서 안보여줄 지를 결정해야했다.
하지만 나는 자바스크립트만 작성하던 사람이라 사용하지 않았던 라이브러리와 네비게이션 클래스들이 익숙하지 않았다.
그래서 자바스크립트로 화면 구조를 짜고 싶었다.
이렇게 말이다.
const navigation = {
screensWithBottomTab: [
'TabScreen1',
'TabScreen2',
'TabScreen3',
'TabScreen4',
],
screens: [
'Screen1',
'Screen2',
'Screen3',
],
};
그래서 코드를 변환할 수 있도록 한번 만들어 보았다.
const navigation = {
screensWithBottomTab: [
'TabScreen1',
'TabScreen2',
'TabScreen3',
'TabScreen4',
],
screens: [
'Screen1',
'Screen2',
'Screen3',
],
};
const androidNavigation = `
@Composable
fun NavigationGraph(navController: NavHostController) {
NavHost(navController, startDestination = "main") {
navigation(startDestination = "${navigation.screensWithBottomTab[0]}", route = "main") {
${navigation.screensWithBottomTab.map(screen =>
` composable("${screen}") { ${screen}(navController) }`).join('\n')
}
}
${navigation.screens.map(screen =>
` composable("${screen}") { ${screen}(navController) }`).join('\n')
}
}
}
`;
console.log(androidNavigation);
이제 내가 원하는 구조를 넣으면 안드로이드 기준으로 네비게이션 코드를 확인할 수 있게 되었다.