我已经用react-native-phone-number-input个NPM包插入了基于国家的phoneNumber.但当我点击数字,然后值不会显示在用户界面中所提到的附加屏幕截图.

import React, {useState} from 'react';
import PhoneInput from 'react-native-phone-number-input';

const ComPhoneInput = () => {
  const [phoneNumber, setPhoneNumber] = useState('');
  const [phoneValue, setPhoneValue] = useState('');

  return (
    <View style={styles.phoneContainerStyle}>
      <PhoneInput
        defaultValue={phoneNumber}
        defaultCode="BD"
        placeholder="01770019346"
        onChangeFormattedText={inputValue => {
          setPhoneNumber(inputValue);
        }}
        onChangeText={pValue => {
          setPhoneValue(pValue);
        }}
        containerStyle={styles.phoneMainStyle}
        textContainerStyle={styles.phoneTextMainStyle}
        textInputStyle={styles.phoneTextStyle}
      />
    </View>
  );
};

export default ComPhoneInput;

Note:,Here is the ScreenShoot. Please check and if you have an idea, please help me with your valuable guideline. Advanced Thanks..

Screenshot of UI

推荐答案

问题出在你的造型上, 若要使该值固定,请将Height属性添加到以下样式:

 phoneMainStyle: {
    // containerStyle
    width: '100%',
    height: 50,
    backgroundColor: COLOR_CONST.DARK_GREEN,
    color: COLOR_CONST.WHITE,
  },
  phoneTextStyle: {
    // textInputStyle
    color: COLOR_CONST.WHITE,
    height: 50,
  },

一旦将高度添加到这两种样式,您的问题就会得到解决.

这里的问题是输入容器的高度,由于内部高度被切断,您已经降低了外部的高度.

以下是现在的输出:

enter image description here

如果你遇到任何其他问题,请让我知道.乐于提供帮助:)

Javascript相关问答推荐

如何在JavaScript中在文本内容中添加新行

在分区内迭代分区

使用json文件字符串来enum显示类型字符串无法按照计算的enum成员值的要求分配给类型号

我试图实现用户验证的reduxstore 和操作中出了什么问题?

Google图表时间轴—更改hAxis文本 colored颜色

如何从一个列表中创建一个2列的表?

在react js中使用react—router—dom中的Link组件,分配的右侧不能被 destruct ''

函数返回与输入对象具有相同键的对象

在服务器上放置了Create Reaction App Build之后的空白页面

如何让npx在windows中运行js脚本?

我在我的Java代码中遇到了问题,代码的一部分看不到先前定义的对象

类构造函数不能在没有用With Router包装的情况下调用

Reaction组件在本应被设置隐藏时仍显示

向数组中的对象添加键而不改变原始变量

在SHINY R中的嵌套模块中,不能使用Java代码

如果一个字符串前面有点、空格或无字符串,后面有空格、连字符或无字符串,则匹配正则表达式

通过跳过某些元素的对象进行映射

Reaction即使在重新呈现后也会在方法内部保留局部值

通过解构/功能组件接收props-prop验证中缺少错误"

使用Perl Selify::Remote::Driver执行Java脚本时出错