react-native（博览会）中的输入无法在网络上打开（混合应用程序）

Question

我正在使用react-native（expo）创建一个应用程序hibrid，以及一些像以下的库：

`

"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 lib的输入，但它不起作用，我也更新了所有依赖项，但它不起作用

Answer 1

此问题可能是由于多个提供程序造成的，一个用于 NativeBase，另一个用于gluestack-ui。我尝试了一种仅使用gluestack-ui 的干净方法。这在网络和移动设备上运行良好。 请看一下零食示例。 https://snack.expo.dev/@sacontrack/custom-input-example