如果你想避免使用虚拟键盘，那么你可以使用文本组件来代替输入字段。我在一个项目中做了类似的事情，使用react-native-country-picker-modal来进行电话输入。
国家/地区电话输入组件：

import { View, Text, StyleSheet } from "react-native";
import React, { useState } from "react";
import CountryPicker from "react-native-country-picker-modal";
import Keypad from "./Keypad";

export default function CountryPhoneInput() {
  const [phoneCountryCode, setPhoneCountryCode] = useState("PK");
  const [phoneCountryCallingCode, setPhoneCountryCallingCode] = useState("92");
  const [showPhoneCountryPicker, setShowPhoneCountryPicker] = useState(false);
  const [phoneNo, setPhoneNo] = useState("123123");

  const onPressKeypad = (number) => {
    if (isNaN(number)) {
      switch (number) {
        case "delete":
          setPhoneNo(phoneNo.slice(0, phoneNo.length - 1));
          break;

        default:
          break;
      }
    } else {
      setPhoneNo(`${phoneNo}${number}`);
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.inputContainer}>
        <CountryPicker
          countryCode={phoneCountryCode}
          visible={showPhoneCountryPicker}
          onSelect={(country) => {
            console.log("COUNTERY ==> ", country);
            setPhoneCountryCode(country.cca2);
            setPhoneCountryCallingCode(country.callingCode);
            setShowPhoneCountryPicker(false);
          }}
          withFilter={true}
        />
        <View style={styles.phoneTextContainer}>
          <Text style={styles.phoneCountryCallingCodeText}>
            +{phoneCountryCallingCode}
          </Text>
          <Text style={styles.phoneNoText}>{phoneNo}</Text>
        </View>
      </View>
      <View style={styles.keypadContainer}>
        <Keypad onPress={(number) => onPressKeypad(number)} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 10,
    paddingTop: 50,
    backgroundColor: "#F0EAD8",
  },
  inputContainer: {
    height: 80,
    display: "flex",
    alignItems: "center",
    flexDirection: "row",
    backgroundColor: "#808080",
    padding: 10,
    borderRadius: 5,
  },
  phoneTextContainer: {
    flex: 1,
    backgroundColor: "white",
    height: "100%",
    borderRadius: 5,
    borderWidth: 1,
    borderColor: "black",
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    padding: 10,
  },
  phoneCountryCallingCodeText: {
    fontWeight: "bold",
    marginRight: 10,
  },
  phoneNoText: {
    fontWeight: "bold",
  },
  keypadContainer: {
    flex: 1,
  },
});

键盘组件：

import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import React from "react";

export default function Keypad({ onPress }) {
  const keyPadRows = [
    ["1", "2", "3"],
    ["4", "5", "6"],
    ["7", "8", "9"],
    ["*", "0", "#"],
    ["", "call", "delete"],
  ];

  const onPressButton = (button) => {
    onPress(button);
  };

  return (
    <View style={styles.container}>
      {keyPadRows.map((row) => (
        <View style={styles.keyPadRow}>
          {row.map((button) => (
            <TouchableOpacity
              style={styles.keypadButton}
              onPress={() => onPressButton(button)}
            >
              <Text style={styles.keypadLabel}>{button}</Text>
            </TouchableOpacity>
          ))}
        </View>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: "flex",
    padding: 50,
  },
  keyPadRow: {
    flex: 1,
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
  },
  keypadButton: {
    display: "flex",
    justifyContent: "flex-start",
    alignItems: "center",
    padding: 10,
    borderRadius: 50,
    width: 70,
    height: 70,
    backgroundColor: "#AAAAAA",
  },
  keypadLabel: {
    color: "white",
    fontSize: 18,
  },
});

结果：x1c 0d1x这是我刚刚为您的案例所做的一个粗略的草稿。显然，这需要一些条件和验证，但希望这将帮助您实现您的目标。