解决React Native中Textinput无法输入、失去焦点、placeholder切换占位符不显示问题
最近写代码的时候遇到了一个很奇怪的问题,点击输入框无法输入文字,光标也不显示,但是点击后弹出的软键盘还在。
用到的组件是react-native中的Textinput
来获取用户输入的文本信息。
问题排查
代码片段
import React, { useState } from 'react';
import { View, Text, TextInput, StyleSheet } from 'react-native';
const YourComponent = () => {
const [isNotShowPlaceholder, setIsNotShowPlaceholder] = useState(false);
const onClickCallback = (eventType, text = null) => {
if (eventType === 'onFocus') {
onFoucsn();
} else if (eventType === 'onBlur') {
onBlur();
} else if (eventType === 'onChangeText') {
onChangeText(text);
}
};
//获取焦点时执行
const onFoucsn = () => {
setIsNotShowPlaceholder(true);
console.log("获取到了焦点!");
};
//失去焦点时执行
const onBlur = () => {
setIsNotShowPlaceholder(false);
console.log("失去了焦点!");
};
//处理用户输入的内容
const onChangeText = (text) => {
console.log(text);
};
return (
<View style={styles.container}>
<Text style={styles.leftText}>用户名</Text>
<TextInput
style={styles.rightInput}
placeholder={isNotShowPlaceholder ? '' : '请输入用户名称'}
keyboardType='default'
onFocus={() => onClickCallback('onFocus')}
onBlur={() => onClickCallback('onBlur')}
onChangeText={(text) => onClickCallback('onChangeText', text)}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'space-between',
width: 600,
},
leftText: {
fontSize: 40,
},
rightInput: {
textAlign: 'right',
fontSize: 40,
},
});
export default YourComponent;
预期效果是当用户点击输入框,获取到焦点,用户输入信息,进行信息处理,用户点击输入框之外的内容则失去焦点。
但是实际上的效果却是:用户点击输入框后,日志提示“获取到了焦点!”并弹出了软键盘,但是立刻又提示“失去了焦点!”而且无法输入信息。
最后排查发现是外层容器View的样式flexDirection: 'row'
导致的。
因为在点击输入框时会进行占位符的内容切换placeholder={isNotShowPlaceholder ? '' : '请输入用户名称'}
可能是由于不同安卓系统对于空字符串的处理方式不同,导致输入框失焦。在安卓8的系统上可以正常输入,但是安卓14上就会出现问题。
解决方法
方法一:给Textinput
设置一个固定的宽度,这样就不会由于占位符改变成空字符串而失焦
rightInput: {
width:500
textAlign: 'right',
fontSize: 40,
},
方法二:将空字符串替换成空格字符' '
,在视觉上可以实现类似空字符串的效果
placeholder={isNotShowPlaceholder ? ' ' : '请输入用户名称'}