reactjs React Native中带有电话号码输入的国家/地区代码选择器

rm5edbpk  于 2023-03-17  发布在  React
关注(0)|答案(1)|浏览(368)

我想在React Native中创建这种类型的UI,我正在使用“react-native-phone-number-input”库。
我的代码是:

<PhoneInput
     defaultValue = {myText}
     defaultCode ='AE'
     backgroundColor = 'black'
     containerStyle = {styles.phoneNumberViewContatiner}
     textContainerStyle={{ borderRadius : 5, borderWidth : 1 }}
     textInputProps = {{showSoftInputOnFocus: false}}
     onChangeFormattedText={text => {setPhoneNumber(text);}}
   />

这是我的容器风格

phoneNumberViewContatiner : {
    width: '80%',
    height: 65,
    fontSize : 60,
    fontWeight : 'bold',
    backgroundColor: 'yellow',
    borderColor : 'grey', 
    borderWidth : 4, 
    borderRadius : 7,
    marginTop : -45
   },

我还尝试了以下库来执行此操作:

  • “@digieggs/rn国家代码选择器'
  • “React-本国-代码-选择器”
  • “React-本土-选择-模态”
  • “React-电话-输入-2”

有人能帮我实现这一点,在这里我还希望,当我点击电话号码输入框,那么它的默认键盘不应该打开,我想从我的自定义键盘输入数字,如下图。所以请帮助我在这方面。

06odsfpq

06odsfpq1#

如果你想避免使用虚拟键盘,那么你可以使用文本组件来代替输入字段。我在一个项目中做了类似的事情,使用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这是我刚刚为您的案例所做的一个粗略的草稿。显然,这需要一些条件和验证,但希望这将帮助您实现您的目标。

相关问题