iOS15点击推送通知后React Native应用UI样式不渲染问题求解

该问题仅出现在iOS冷启动场景，核心原因是：

• 你在模块顶层注册PushNotification.onNotificationOpened回调，iOS冷启动时该回调触发时机远早于React Native JS bundle加载完成、导航容器初始化、组件挂载、StyleSheet样式解析的时机
• 硬编码的1秒setTimeout延迟不可靠，不同设备的JS bundle加载速度差异大，跳转触发时页面的渲染上下文还未完全初始化，导致样式无法正确绑定到渲染节点
• Android端推送回调触发时机晚于JS上下文初始化，因此不会出现该问题

按以下步骤修改即可修复：

• 移除模块顶层的推送监听，将推送回调移到根导航组件内部，不要在JS bundle加载阶段就注册回调
• 新增全局变量暂存未处理的推送数据，优先使用PushNotification.getLaunchNotification()获取冷启动时触发的推送通知
• 监听导航容器的onReady事件，等导航完全初始化、根视图挂载完成后，再处理暂存的推送跳转逻辑，移除硬编码的延迟逻辑
• Home组件新增挂载状态判断，等组件完全挂载后再渲染UI，保证样式已解析完成
• 检查iOS原生端AppDelegate的推送处理逻辑，不要在冷启动触发推送时重复创建RCTRootView或UIWindow，复用原有根视图即可

根导航组件修改 #

import { useNavigationContainerRef, NavigationContainer } from '@react-navigation/native'
import PushNotification from '@aws-amplify/pushnotification'
import { useEffect } from 'react'

// 全局暂存未处理的推送数据
let pendingNotificationId = null

PushNotification.onNotificationOpened(notification => {
  const obj = notification._data.data.jsonBody
  const navigationRef = useNavigationContainerRef()
  if (navigationRef.isReady()) {
    navigationRef.navigate('Home', { notificationId: obj.id })
  } else {
    pendingNotificationId = obj.id
  }
})

const AppNavigator = () => {
  const navigationRef = useNavigationContainerRef()

  useEffect(() => {
    // 组件挂载时获取冷启动推送数据
    PushNotification.getLaunchNotification().then(notification => {
      if (notification) {
        const obj = notification._data.data.jsonBody
        pendingNotificationId = obj.id
      }
    })
  }, [])

  const handleNavReady = () => {
    // 导航就绪后再处理跳转
    if (pendingNotificationId) {
      navigationRef.navigate('Home', { notificationId: pendingNotificationId })
      pendingNotificationId = null
    }
  }

  return (
    <NavigationContainer ref={navigationRef} onReady={handleNavReady}>
      {/* 你的路由配置 */}
    </NavigationContainer>
  )
}

export default AppNavigator

Home组件修改 #

import { useState, useEffect } from 'react'
import { View, StyleSheet } from 'react-native'

const Home = ({route, navigation}) => {
  const [isMounted, setIsMounted] = useState(false)

  useEffect(() => {
    // 标记组件已挂载
    setIsMounted(true)
    APICall()
    // 处理推送参数
    if (route.params?.notificationId) {
      notificationAPI(route.params.notificationId)
    }
  }, [isVisible, route.params?.notificationId])

  // 挂载完成前返回空，避免未初始化的渲染
  if (!isMounted) return null

  return (
    <View style={styles.container}>
      {/* 自定义UI */}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    // 你的样式定义
  }
})

export default Home

内容的提问来源于stack exchange，提问作者Pratap Penmetsa