Проблема с черным экраном на платформе iOS при переключении экрана с использованием Kotlin Multiplatform ⇐ IOS

[Anonymous]

Во время разработки приложения KMP + Compose я столкнулся с проблемой пользовательского интерфейса только для iOS.
Видеоописание проблемы с рендерингом
Проблема выглядит так: при использовании приложения в какой-то случайный момент времени экраны остаются черными, а когда я через полсекунды перехожу на другую вкладку, я вижу прошлый экран, а затем черный экран, это тоже странный момент, потому что во время перехода на новую вкладку я должен увидеть второй текущий экран, а не прошлый экран.
Эта проблема возникает только на экранах, находящихся внутри панели вкладок. Компонент TabBar по-прежнему виден и доступен для щелчка, и пользователь может взаимодействовать с компонентом навигации, но не с каким-либо экраном внутри.
Для навигации(NavHost) и экранный пользовательский интерфейс с использованием собственных компонентов Android/KMP, ничего родного для IOS, по крайней мере, в коде Swift с нашей стороны.
Решение проблемы возможно, если я перезапущу приложение.
Алгоритм воспроизведения этой ошибки следующий:
Приложение не должно запускаться. Мне нужно открыть приложение, щелкнуть вкладку (в моем случае последнюю), затем сразу переключиться на следующую вкладку и обратно, и все это примерно за 10 секунд. Если проблема не была обнаружена, мне нужно закрыть приложение и запустить заново. За 10 раундов этого алгоритма я могу воспроизвести эту проблему.
Это не универсальный алгоритм, но он работает. Мой результат после тестирования:
Используя эти физические устройства, я могу воспроизвести эту проблему.
iPhone 13 Pro Max, iOS 17.6.1
iPad Pro 12.9, iOS 18.5
iPad Pro 12.9, iOS 18.6.2
Устройства, на которых я не могу воспроизвести эту проблему:
iPhone SE 2022, iOS 18.5
Похоже, эта проблема также может зависеть от размера экрана. На iPad можно очень быстро воспроизвести проблему, следуя приведенному выше алгоритму.
Подробности проекта:
Минимальная версия проекта iOS — iOS 16.
Kotlin версия 2.2.0
Compose Multiplatform 1.8.2
AGP 8.8.2
AndroidX Навигация 2.9.0-beta03
Жизненный цикл AndroidX 2.9.1
Знаете ли вы, почему может возникнуть эта проблема, или, возможно, кто-то уже сталкивался с этой проблемой и решил ее?
Код, осуществляющий навигацию по экранам:
@OptIn(ExperimentalHazeMaterialsApi::class)
@Composable
@Preview
fun App() {
AppTheme {
val navController = rememberNavController()
CompositionLocalProvider(style) {
Surface(
color = AppTheme.colorScheme.background,
contentColor = AppTheme.colorScheme.onBackground,
) {
Scaffold(bottomBar = {
Box(modifier = Modifier.fillMaxWidth()) {
BottomNavigation(
modifier = Modifier.fillMaxWidth(),
navController = navController
)
}) ) { paddingValues ->
AppNavHost(
modifier = Modifier.fillMaxSize(),
navController = navController,
)
}
}
}

@Composable
fun AppNavHost(
modifier: Modifier = Modifier,
navController: NavHostController,
) {
NavHost(
modifier = modifier,
startDestination = Destination.Root,
) {
composable(
enterTransition = { fadeEnterTransition() },
exitTransition = { fadeExitTransition() }
) {
RootScreen(navController = navController, viewModel = koinViewModel())
}
mainGraph(navController, paddingValues)
}
}

fun fadeEnterTransition(): EnterTransition = fadeIn(tween(FADE_ANIMATION_DURATION))
fun fadeExitTransition(): ExitTransition = fadeOut(tween(FADE_ANIMATION_DURATION))
private const val FADE_ANIMATION_DURATION = 0

fun NavGraphBuilder.mainGraph(navController: NavHostController, paddingValues: PaddingValues) {
composable(
enterTransition = { fadeEnterTransition() },
exitTransition = { slideExitTransition(destination = targetState.destination) }
) {
ScreenOne(navController, koinViewModel(), paddingValues)
}
composable(
enterTransition = { fadeEnterTransition() },
exitTransition = { fadeExitTransition() }
) {
ScreenTwo(navController, koinViewModel(), paddingValues)
}
composable(
enterTransition = { fadeEnterTransition() },
exitTransition = { fadeExitTransition() }
) {
ScreenThree(navController, koinViewModel(), paddingValues)
}
composable(
enterTransition = { fadeEnterTransition() },
exitTransition = { fadeExitTransition() }
) {
ScreenFour(navController, koinViewModel(), paddingValues)
}
}

Нижняя навигация
@Composable
fun BottomNavigation(
modifier: Modifier = Modifier,
navController: NavController,
) {
// Code inside each bottom bar button that opens screens
navController.navigate(item.destination) { ... }
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... lin-multip