Reactjs 为什么在我的react native应用程序中，每次按键后键盘都会消失？

下面是我代码的主要部分，基本上，它允许用户选择一个国家并输入他们的电话号码。一旦电话号码被识别为有效，图标的颜色就会改变。唯一的问题是，每次按下数字键盘上的一个键时，键盘都会继续消失。以下是一个例子：

以下是来自手机登录屏幕的源代码。如果没有行

onChangePhoneNumber={（phone）=>{this.updateInfo（）}}

键盘不会在键入时消失，但在键入有效数字时，下一个图标不会变为蓝色。该函数根据用户类型更新状态

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, TextInput, Keyboard} from 'react-native';
import { Icon } from 'react-native-elements';

import KeyboardAccessory from 'react-native-sticky-keyboard-accessory';
import PhoneInput from 'react-native-phone-input';

export default class PhoneLogin extends Component {

    constructor() {
        super();

        this.state = {
            valid: "",
            type: "",
            value: "",
            iconColor: "#D3D3D3",
        };

        this.updateInfo = this.updateInfo.bind(this);
    }

    updateInfo() {
        this.setState({
            valid: this.phone.isValidNumber(),
            type: this.phone.getNumberType(),
            value: this.phone.getValue().replace(/[- )(]/g,''),
        });
    }

    render() {
        return (
          <View style={styles.container}>
            <PhoneInput
              ref={ref => {
                this.phone = ref;
              }}
              style={{height: 50, borderColor:'#44c0b9', borderBottomWidth:2}}
              onChangePhoneNumber={ (phone) => {this.updateInfo()} }
            />

            <KeyboardAccessory backgroundColor="#fff">
                <View style={{ alignItems: 'flex-end', padding:10 }}>
                    <Icon
                        raised
                        reverse
                        color={(this.state.valid) ? "#44c0b9" : "#D3D3D3"}
                        name='arrow-right'
                        type='font-awesome'
                        onPress={ Keyboard.dismiss()}
                    />
                </View>
            </KeyboardAccessory>
          </View>
        );
    }

}

import React，{Component}来自'React'；
从“react native”导入{View，Text，StyleSheet，TouchableOpacity，TextInput，Keyboard}；
从“react native elements”导入{Icon}；
从“react native sticky keyboard附件”导入键盘附件；
从“react native phone input”导入PhoneInput；
导出默认类PhoneLogin扩展组件{
构造函数（）{
超级（）；
此.state={
有效：“，
类型：“，
值：“”，
iconColor:#D3“，
};
this.updateInfo=this.updateInfo.bind（this）；
}
更新信息（）{
这是我的国家({
有效：this.phone.isValidNumber（），
类型：this.phone.getNumberType（），
值：this.phone.getValue（）.replace（/[-）（]/g'，），
});
}
render（）{
返回(
{
this.phone=ref；
}}
样式={{高度：50，边框颜色：'#44c0b9'，边框底部宽度：2}}
onChangePhoneNumber={（电话）=>{this.updateInfo（）}}
/>
);
}
}

本机电话输入软件包有一个名为

focus

的功能，基本上将焦点放在文本输入上。在我的代码中

this.phone=ref

，因此当我运行

this.phone.focus（）

时，文本输入处于焦点位置，键盘显示出来。为了防止键盘消失，我所要做的就是添加以下功能

componentDidMount(){
    this.phone.focus()
}