解决React Native中Textinput无法输入、失去焦点、placeholder默认占位符不显示问题

解决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 ? ' ' : '请输入用户名称'}