React-Native TextInput如何实现点击(X)按钮跨平台清除文本功能

要实现全平台可用的输入框清除功能，通过受控组件绑定状态的方式即可实现，不需要依赖单端生效的clearButtonMode属性，具体实现逻辑如下：

• 第一步：声明状态变量存储输入框的文本内容
  使用useState定义响应式状态，示例：

  import { useState } from 'react';
  import { TextInput, TouchableOpacity, View, Text } from 'react-native';
  
  // 组件内声明状态
  const [inputValue, setInputValue] = useState('');
  

• 第二步：给TextInput绑定状态相关属性
  将状态作为TextInput的value属性值，同时通过onChangeText同步用户输入到状态中，同步添加自定义清除按钮：

  <View style={{ flexDirection: 'row', alignItems: 'center', borderWidth: 1, borderColor: '#ccc', paddingHorizontal: 10, borderRadius: 4 }}>
    <TextInput
      style={{ flex: 1, height: 40 }}
      value={inputValue}
      onChangeText={(text) => setInputValue(text)}
      placeholder="请输入内容"
    />
    {/* 仅输入框有内容时显示清除按钮 */}
    {inputValue.length > 0 && (
      <TouchableOpacity onPress={() => setInputValue('')}>
        <Text style={{ fontSize: 18, color: '#999', paddingLeft: 8 }}>×</Text>
      </TouchableOpacity>
    )}
  </View>
  

• 补充说明
  该方案完全不依赖平台专属特性，iOS、Android、Web端均可正常运行，同时支持自定义清除按钮的样式、显示逻辑，灵活度远高于系统自带的clearButtonMode属性。如果你的项目使用类组件，只需要将状态挂载到this.state上，通过this.setState修改状态即可，逻辑完全一致。

内容的提问来源于stack exchange，提问作者warCommander