Se usó la API de Cloud Translation para traducir esta página.

Cómo migrar Jetpack Navigation a Navigation Compose

La API de Navigation Compose te permite navegar entre elementos componibles en una app de Compose y, al mismo tiempo, aprovechar el componente, la infraestructura y las funciones de Jetpack Navigation.

En esta página, se describe cómo migrar de Jetpack Navigation basado en fragmentos a Navigation Compose, como parte de la migración de IU más grande basada en objetos View a Jetpack Compose.

Requisitos previos para la migración

Puedes migrar a Navigation Compose una vez que puedas reemplazar todos tus fragmentos con los elementos componibles de pantalla correspondientes. Los elementos componibles de pantalla pueden incluir una combinación de contenido de Compose y View, pero todos los destinos de navegación deben ser componibles para habilitar la migración de Navigation Compose. Hasta entonces, debes seguir usando el componente de Navigation basado en fragmentos en tu vista de interoperabilidad y en la base de código de Compose. Consulta la documentación sobre la interoperabilidad de navegación para obtener más información.

El uso de Navigation Compose en una app solo de Compose no es un requisito previo. Puedes seguir usando el componente de Navigation basado en fragmentos, siempre y cuando conserves fragmentos para alojar tu contenido componible.

Pasos de la migración

Ya sea que sigas nuestra estrategia de migración recomendada o adoptes otro enfoque, llegarás a un punto en el que todos los destinos de navegación serán elementos componibles de pantalla y los fragmentos solo actuarán como contenedores componibles. En esta etapa, puedes migrar a Navigation Compose.

Si tu app ya sigue un patrón de diseño de UDF y nuestra guía de arquitectura, migrar a Jetpack Compose y Navigation Compose no debería requerir refactorizaciones importantes de otras capas de la app, aparte de la capa de la IU.

Para migrar a Navigation Compose, sigue estos pasos:

Agrega la dependencia de Navigation Compose a tu app.

Crea un elemento App-level componible y agrégalo a tu Activity como punto de entrada de Compose para reemplazar la configuración del diseño de View:

class SampleActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample)
        setContent {
            SampleApp(/* ... */)
        }
    }
}MigrationCommonScenariosSnippets.kt

Configura NavController en un lugar donde todos los elementos componibles que necesiten hacer referencia a él tengan acceso (por lo general, dentro del elemento App componible). Este enfoque sigue los principios de elevación de estado y te permite usar NavController como fuente de confianza para navegar entre pantallas componibles y mantener la pila de actividades:
```
@Composable
fun SampleApp() {
    val navController = rememberNavController()
    // ...
}MigrationCommonScenariosSnippets.kt
```

Crea el elemento NavHost de tu app dentro del elemento componible App y pasa el navController:

@Composable
fun SampleApp() {
    val navController = rememberNavController()

    SampleNavHost(navController = navController)
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = "first") {
        // ...
    }
}MigrationCommonScenariosSnippets.kt

Agrega los destinos composable para compilar tu gráfico de navegación. Si cada pantalla se migró anteriormente a Compose, este paso solo consiste en extraer esos elementos componibles de pantalla de tus fragmentos a los destinos de composable:

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        return ComposeView(requireContext()).apply {
            setContent {
                // FirstScreen(...) EXTRACT FROM HERE
            }
        }
    }
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = "first") {
        composable("first") {
            FirstScreen(/* ... */) // EXTRACT TO HERE
        }
        composable("second") {
            SecondScreen(/* ... */)
        }
        // ...
    }
}MigrationCommonScenariosSnippets.kt

Si seguiste las instrucciones sobre cómo diseñar la IU de Compose, específicamente cómo los ViewModel y los eventos de navegación deben pasarse a los elementos componibles, el siguiente paso es cambiar la forma en que proporcionas el ViewModel a cada elemento componible de pantalla. A menudo, puedes usar la inyección de Hilt y su punto de integración con Compose y Navigation a través de hiltViewModel:
```
@Composable
fun FirstScreen(
    // viewModel: FirstViewModel = viewModel(),
    viewModel: FirstViewModel = hiltViewModel(),
    onButtonClick: () -> Unit = {},
) {
    // ...
}MigrationCommonScenariosSnippets.kt
```

Reemplaza todas las llamadas de navegación de findNavController() por las de navController y pásalas como eventos de navegación a cada pantalla componible, en lugar de pasar todo el elemento navController. Este enfoque sigue las prácticas recomendadas de exposición de eventos de funciones de componibilidad a los llamadores y mantiene navController como la única fuente de confianza.

Si ya usaste el complemento Safe Args para generar instrucciones y acciones de navegación, reemplázalo por una ruta, una ruta de acceso de cadena al elemento componible que es única para cada destino.
Para reemplazar Safe Args cuando se pasan datos, consulta Cómo navegar con argumentos.

Para obtener seguridad de tipos en Navigation Compose, lee la sección Safe Args a continuación.

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = "first") {
        composable("first") {
            FirstScreen(
                onButtonClick = {
                    // findNavController().navigate(firstScreenToSecondScreenAction)
                    navController.navigate("second_screen_route")
                }
            )
        }
        composable("second") {
            SecondScreen(
                onIconClick = {
                    // findNavController().navigate(secondScreenToThirdScreenAction)
                    navController.navigate("third_screen_route")
                }
            )
        }
        // ...
    }
}MigrationCommonScenariosSnippets.kt

Quita todos los fragmentos, los diseños XML relevantes, la navegación innecesaria y otros recursos, y las dependencias inactivas de Fragment y Jetpack Navigation.

Puedes encontrar los mismos pasos con más detalles relacionados con Navigation Compose en la documentación de configuración.

Casos de uso comunes

Independientemente del componente Navigation que uses, se aplican los mismos principios de Navigation.

Entre los casos de uso comunes durante la migración, se incluyen los siguientes:

Para obtener información más detallada sobre estos casos de uso, consulta Cómo navegar con Compose.

Safe Args

A diferencia de Jetpack Navigation, Navigation Compose no admite el uso del complemento Safe Args para la generación de código. En su lugar, puedes lograr seguridad de tipos con Navigation Compose mediante la estructuración de tu código para que sea seguro de tipos en el tiempo de ejecución.

Recupera datos complejos durante la navegación

Navigation Compose se basa en rutas de cadenas y, a diferencia de Jetpack Navigation, no admite el paso de objetos Parcelables y serializables personalizados como argumentos.

Te recomendamos que no pases objetos de datos complejos durante la navegación. En su lugar, pasa la información mínima necesaria, como un identificador único o alguna otra forma de ID, como argumentos cuando realices acciones de navegación. Debes almacenar objetos complejos como datos en una única fuente de información, como la capa de datos. Para obtener más información, consulta Recupera datos complejos durante la navegación.

Si tus fragmentos pasan objetos complejos como argumentos, considera refactorizar primero tu código, de modo que permita almacenar y recuperar estos objetos desde la capa de datos. Consulta el repositorio de Now in Android para ver ejemplos.

Limitaciones

En esta sección, se describen las limitaciones actuales de Navigation Compose.

Migración incremental a Navigation Compose

Actualmente, no puedes usar Navigation Compose mientras sigues usando Fragment como destinos en tu código. Para comenzar a usar Navigation Compose, todos tus destinos deben ser componibles. Puedes hacer un seguimiento de esta solicitud de función en la Herramienta de seguimiento de errores.

Animaciones de transición

A partir de Navigation 2.7.0-alpha01, la compatibilidad con la configuración de transiciones personalizadas, que antes se usaba desde AnimatedNavHost, ahora se admite directamente en NavHost. Lee las notas de la versión para obtener más información.

Más información

Para obtener más información sobre cómo migrar a Navigation Compose, consulta los siguientes recursos:

Codelab de Navigation Compose: Aprende los conceptos básicos de Navigation Compose con un codelab práctico.
Repositorio de Now in Android: Es una app para Android completamente funcional que se compiló por completo con Kotlin y Jetpack Compose, que sigue las prácticas recomendadas de diseño y desarrollo de Android, y que incluye Navigation Compose.
Cómo migrar Sunflower a Jetpack Compose: Es una entrada de blog que documenta el recorrido de migración de la app de ejemplo de Sunflower de Views a Compose, que también incluye la migración a Navigation Compose.
Jetnews para cada pantalla: Es una entrada de blog que documenta la refactorización y la migración de la muestra de Jetnews para admitir todas las pantallas con Jetpack Compose y Navigation Compose.

Recomendaciones para ti

Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
Cómo navegar con Compose
Compose y otras bibliotecas
Otras consideraciones