Expo混合应用Web端输入框点击后键盘弹出即收回的问题求助

大家好，我正在基于React Native（Expo）开发一款混合应用，目前使用的依赖清单如下：

"dependencies": {
  "@apollo/client": "^3.8.4",
  "@gluestack-style/react": "^1.0.15",
  "@gluestack-ui/config": "^1.0.10",
  "@gluestack-ui/themed": "^1.0.13",
  "@graphql-codegen/introspection": "^4.0.0",
  "@hookform/resolvers": "^3.3.1",
  "@react-native-async-storage/async-storage": "1.18.2",
  "@react-native-clipboard/clipboard": "^1.13.2",
  "@react-native-community/slider": "4.4.2",
  "@react-native-picker/picker": "2.4.10",
  "@types/apollo-upload-client": "^17.0.2",
  "@types/react": "~18.2.14",
  "date-fns": "^3.0.6",
  "expo": "^48.0.7",
  "expo-application": "~5.3.0",
  "expo-av": "~13.4.1",
  "expo-camera": "~13.4.4",
  "expo-clipboard": "~4.3.1",
  "expo-constants": "^14.2.1",
  "expo-image-manipulator": "~11.3.0",
  "expo-image-picker": "~14.3.2",
  "expo-linking": "~5.0.2",
  "expo-router": "^2.0.14",
  "expo-secure-store": "~12.3.1",
  "expo-splash-screen": "~0.20.5",
  "expo-status-bar": "~1.6.0",
  "expo-web-browser": "~12.3.2",
  "graphql": "^15.8.0",
  "jwt-decode": "^3.1.2",
  "native-base": "^3.4.28",
  "nookies": "^2.5.2",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "react-easy-crop": "^5.0.2",
  "react-hook-form": "^7.49.2",
  "react-native": "0.72.6",
  "react-native-color-picker": "^0.6.0",
  "react-native-gesture-handler": "~2.12.0",
  "react-native-pager-view": "6.2.0",
  "react-native-picker-select": "^9.0.0",
  "react-native-reanimated": "~3.3.0",
  "react-native-safe-area-context": "4.6.3",
  "react-native-screens": "~3.22.0",
  "react-native-svg": "13.4.0",
  "react-native-tab-view": "^3.5.2",
  "react-native-vector-icons": "^10.0.0",
  "react-native-web": "~0.19.6",
  "typescript": "^5.1.3",
  "yup": "^1.3.1"
},
"devDependencies": {
  "@babel/core": "^7.19.3",
  "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
  "@graphql-codegen/cli": "^5.0.0",
  "@graphql-codegen/client-preset": "^4.1.0",
  "@types/react-color": "^3.0.6",
  "@types/react-native-vector-icons": "^6.4.13",
  "apollo-upload-client": "^17.0.0",
  "react-native-dotenv": "^3.4.9"
},
"resolutions": {
  "metro": "^0.80.3",
  "metro-resolver": "^0.80.3"
},
"overrides": {
  "metro": "^0.80.3",
  "metro-resolver": "^0.80.3"
}

现在遇到一个很头疼的问题：当应用在生产环境下，通过手机浏览器打开时，点击输入框后键盘刚弹出来就立刻收回，根本没法正常输入内容。

我当前使用的输入组件代码如下：

import { StyleProp, ViewStyle } from "react-native";
import {
  Box,
  FormControl,
  InputLeftAddon,
  Input as NativeBase,
  useBreakpointValue,
} from "native-base";
import { ErrorMessage } from "./ErrorMessage";
import { Platform } from "react-native";
import useVerifyScreen from "../../hooks/useVerifyScreen";
import { ReactElement } from "react";
import { Input as GlueStackBase, InputField } from '@gluestack-ui/themed';

type FieldError = {
  message?: string | undefined;
};

type InputProps = {
  onChange: (text: string) => void;
  error?: FieldError | undefined;
  value?: any;
  placeholder?: string;
  isDisabled?: boolean;
  keyboardType?:
    | "default"
    | "number-pad"
    | "decimal-pad"
    | "numeric"
    | "email-address"
    | "phone-pad";
  label?: string;
  style?: StyleProp<ViewStyle>;
  onBlur?: () => void;
  onFocus?: () => void;
  disabled?: boolean;
  readOnly?: boolean;
  inputLeftElement?: ReactElement;
};

export function Input({
  onChange,
  error,
  value,
  placeholder,
  isDisabled = false,
  keyboardType,
  label,
  style,
  onBlur,
  onFocus,
  readOnly = false,
  inputLeftElement
}: InputProps) {
  const { isDesktop } = useVerifyScreen();
  const fontSize = useBreakpointValue({ base: "sm", md: "md" });

  return (
    <Box style={style}>
      {label && (
        <FormControl.Label mb="4px" _text={{ fontSize }}>
          {label}
        </FormControl.Label>
      )}
      <NativeBase
        isDisabled={isDisabled}
        padding={3}
        keyboardType={keyboardType}
        placeholder={placeholder}
        onChangeText={onChange}
        onBlur={onBlur}
        onFocus={onFocus}
        fontSize={"sm"}
        isInvalid={error?.message ? true : false}
        value={value}
        w={"100%"}
        _disabled={isDisabled ? { opacity: 0.5 } : undefined}
        isReadOnly={readOnly}
        _invalid={{invalidOutlineColor: "red.600"}}
      />
      {error && error.message && <ErrorMessage message={error.message} />}
    </Box>
  );
}

我已经尝试过两种解决方法，但都没见效：

• 把输入组件替换成Gluestack UI的Input组件，问题依旧存在
• 更新了所有依赖包到最新版本，还是没能解决这个键盘弹出又收回的问题

有没有大佬遇到过类似的情况，或者能给我一些排查方向？感激不尽！

备注：内容来源于stack exchange，提问作者lucas oliveira