React Native:在输入文本内书写时添加要删除的符号

import React, { useState } from 'react';
import { TextInput, View } from 'react-native';

const App = () => {
  const [text, setText] = useState('');

  const handleTextChange = (inputText) => {
    setText(inputText);
  };

  const handleClearText = () => {
    setText('');
  };

  return (
    <View>
      <TextInput
        style={{ height: 40, borderColor: 'gray', borderWidth: 1, paddingHorizontal: 10 }}
        value={text}
        onChangeText={handleTextChange}
        secureTextEntry={true}
      />
      {text.length > 0 && (
        <Text style={{ color: 'red' }} onPress={handleClearText}>
          X
        </Text>
      )}
    </View>
  );
};

export default App;