RN——TextInput 文本框删除最后一个字符，光标移动到组件末尾

在React Native中，如果你想要在TextInput组件中删除最后一个字符，并且将光标移动到组件的末尾，你可以通过控制文本值和光标位置来实现。以下是一个简单的例子：

import React, { useState, useRef } from 'react';
import { TextInput, View, Button } from 'react-native';
 
const App = () => {
  const [text, setText] = useState('');
  const textInputRef = useRef(null);
 
  const removeLastCharacter = () => {
    if (text.length > 0) {
      setText(text.slice(0, -1)); // 删除最后一个字符
      textInputRef.current.setNativeProps({
        text: text, // 更新文本
      });
      // 将光标移动到末尾
      requestAnimationFrame(() => {
        textInputRef.current.setNativeProps({
          selection: { start: text.length, end: text.length },
        });
      });
    }
  };
 
  return (
    <View>
      <TextInput
        ref={textInputRef}
        value={text}
        onChangeText={setText}
      />
      <Button title="Remove Last Character" onPress={removeLastCharacter} />
    </View>
  );
};
 
export default App;

在这个例子中，我们使用了useState钩子来管理TextInput的文本值，并使用useRef来创建一个引用，以便我们可以直接访问并操作TextInput组件。removeLastCharacter函数会在按钮点击时被调用，它会检查当前是否有文本，如果有，则删除最后一个字符，并通过textInputRef.current.setNativeProps更新文本，并且使用requestAnimationFrame确保在更新文本后设置光标位置。