在 react native 中，组件函数本身不能是 async 的，否则会返回 promise 对象而非 jsx，导致 “objects are not valid as a react child” 错误；正确做法是使用 usestate + useeffect 配合立即执行的异步函数完成数据获取与渲染。
在 react native 中，组件函数本身不能是 async 的，否则会返回 promise 对象而非 jsx，导致 “objects are not valid as a react child” 错误；正确做法是使用 usestate + useeffect 配合立即执行的异步函数完成数据获取与渲染。
React Native 组件必须是同步函数，其返回值需为合法的 React 元素（如 <View>、<Text> 等）。若将组件定义为 async 函数（例如 export const PlatformInfo = async ({packageName}) => {...}），JavaScript 会自动将其包装为返回 Promise<JSX.Element> 的函数——而 React 渲染器无法解析 Promise 对象，最终抛出类似 Objects are not valid as a React child (found: object with keys {_h, _i, _j, _k}) 的错误（这些键名是 React 内部 Promise/fiber 对象的私有属性）。
✅ 正确解法：状态驱动 + 副作用触发异步逻辑
使用 useState 管理安装状态，用 useEffect 触发异步检查，并通过 setState 更新 UI：
// PlatformInfo.tsx
import React, { useState, useEffect } from 'react';
import { Platform, Text, View } from 'react-native';
import SharedGroupPreferences from 'react-native-shared-group-preferences';
const IsInstalled = async (isAndroid: boolean, packageName: string): Promise<boolean> => {
if (isAndroid) {
try {
return await SharedGroupPreferences.isAppInstalledAndroid(packageName);
} catch (e) {
console.warn(`Failed to check Android app installation for ${packageName}:`, e);
return false;
}
}
// iOS 暂不支持或需其他方案（如 canOpenURL + URL Scheme）
return false;
};
export const PlatformInfo = ({ packageName }: { packageName: string }) => {
const [isAppInstalled, setIsAppInstalled] = useState<boolean | null>(null); // 初始为 null 表示 loading
const isAndroid = Platform.OS === 'android';
useEffect(() => {
const checkInstallation = async () => {
const result = await IsInstalled(isAndroid, packageName);
setIsAppInstalled(result);
};
checkInstallation();
}, [isAndroid, packageName]);
// 可选：添加加载态提示，提升用户体验
if (isAppInstalled === null) {
return (
<View>
<Text>Operating System: {isAndroid ? 'Android' : 'iOS'}</Text>
<Text>{packageName}: Checking...</Text>
</View>
);
}
return (
<View>
<Text>Operating System: {isAndroid ? 'Android' : 'iOS'}</Text>
<Text>
{packageName}: {isAppInstalled ? 'Installed' : 'Not installed'}
</Text>
</View>
);
};? 关键注意事项：
- ❌ 禁止导出 async function Component() —— 这不是 React 支持的组件签名；
- ✅ useEffect 中调用自执行 async 函数是标准模式，但需确保 setState 不在组件卸载后调用（生产环境建议增加 isMounted 判断或使用 AbortController，此处为简洁省略）；
- ⚠️ SharedGroupPreferences.isAppInstalledAndroid 在 Android 上需已正确配置 sharedPreferences 权限与 Group ID，iOS 端无等效 API，应避免在 iOS 上调用或提供降级逻辑；
- ? 控制台日志（如 console.log）不应放在组件顶层，而应置于异步回调中，避免重复执行；
- ? 若需复用该逻辑于多个组件，可进一步封装为自定义 Hook，例如 useAppInstallationStatus(packageName)。
通过状态与副作用的分离设计，既保持了组件的纯函数特性，又实现了异步数据驱动的动态渲染，完全符合 React 的设计理念与 React Native 的运行约束。
