Expo SDK 51集成Lean React Native SDK遇RCTModalHostView错误求助

我使用React Native开发移动应用，基于Expo SDK ~51.0.18，用Expo Router处理路由。尝试集成Lean tech SDK（用于海湾合作委员会地区银行账户连接，依赖react-native-webview），已按照官方教程编写代码：

import React, {useRef} from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
import { Button, useTheme} from 'react-native-paper';
// @ts-ignore
import LinkSDK from "lean-react-native";

const Screen: React.FC = () => {
 
  const theme = useTheme();
  const styles = createStyles(theme);
  const Lean = useRef(null)

  return (
      <View style={styles.container}>

          <LinkSDK
              ref={Lean}
              appToken="xxxxxx-6e5e-xxxx-xx58-bx6xd9fxxxxx"
              version="@latest"
              country="ArabEmirates"
              sandbox
          />
          <Button style={styles.button} mode="contained" textColor="#013511"  onPress={() => Lean.current.connect({ customer_id: "xxxxxxx" })}>
              Link Bank Account
          </Button>


      </View>
  );
};

点击"Link Bank Account"按钮发起连接时，出现错误：

Render Error View config getter callback for component RCTModalHostView must be a function (received 'undefined').

我在安卓设备测试，未执行Pod安装步骤，想咨询该问题是否因使用Expo导致？是否需要额外配置或链接？

这个错误确实和Expo环境特性相关，核心原因是Lean tech SDK依赖的原生模块（包括RCTModalHostView相关组件）在Expo Managed Workflow下未被正确配置或链接，以下是具体解决步骤：

1. 校验依赖版本兼容性 #

Expo SDK 51内置的react-native-webview版本为13.8.6，需确保Lean SDK依赖的react-native-webview版本与该版本匹配：

• 查看项目package.json，若Lean依赖的版本与Expo内置版本冲突，手动调整为13.8.6后重新安装依赖。

2. 切换到Expo预构建模式 #

Lean SDK包含原生代码，无法在纯Managed Workflow下直接使用，需切换到预构建模式生成原生项目文件：

npx expo prebuild --platform android

执行后会生成安卓原生项目目录，用于后续处理原生模块链接。

3. 配置安卓原生项目 #

预构建完成后，按照Lean官方安卓指南补充配置：

• 在android/app/build.gradle的repositories块中添加Lean的Maven仓库：

  repositories {
      maven { url "https://raw.githubusercontent.com/leantechpayments/lean-android/master/maven" }
  }
  

• 确认minSdkVersion设置为21或更高（Lean安卓SDK要求）。

4. 重新构建运行项目 #

完成配置后，重新构建并运行安卓项目：

npx expo run:android

5. 替代方案：使用Lean Web SDK #

若不想切换到预构建模式，可通过Expo内置的WebView组件加载Lean Web SDK实现功能：

import React, { useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import { Button } from 'react-native-paper';
import { WebView } from 'react-native-webview';

const Screen = () => {
  const webViewRef = useRef(null);

  const openLeanConnect = () => {
    const initScript = `
      window.Lean.init({
        app_token: '你的AppToken',
        sandbox: true,
        country: 'ArabEmirates'
      });
      window.Lean.connect({ customer_id: '你的客户ID' });
    `;
    webViewRef.current?.injectJavaScript(initScript);
  };

  return (
    <View style={styles.container}>
      <WebView
        ref={webViewRef}
        source={{ uri: 'https://cdn.leantech.me/link/v1/lean-link.html' }}
        style={{ height: 0, width: 0 }}
        javaScriptEnabled={true}
      />
      <Button 
        mode="contained" 
        textColor="#013511" 
        onPress={openLeanConnect}
      >
        Link Bank Account
      </Button>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
});

export default Screen;

内容的提问来源于stack exchange，提问作者0xD1x0n