React Native render方法内不同组件调用方式引发输入框键盘收起问题

问题原因 #

你遇到的键盘自动收起问题核心原因是：你把Input组件定义在了App组件的内部作用域中。
每当你在输入框输入内容触发setText更新时，App组件都会触发重渲染，此时会重新生成一个全新的Input函数引用。

两种写法的核心区别 #

• <Input />写法
  这是React标准的组件实例化写法，React会将其识别为独立组件，走完整的组件挂载/卸载生命周期。当App重渲染生成新的Input函数引用时，React会判定旧的Input组件实例需要销毁，重新挂载新的Input实例，绑定在旧实例上的TextInput原生节点会被卸载，输入框自然失焦，触发键盘收起。
• {Input()}写法
  这本质是普通的JS函数调用，不会被React识别为独立组件，相当于你把Input函数返回的TextInput元素直接内嵌在App的渲染树中，该输入框的生命周期完全和App绑定，App重渲染时只会更新输入框的内容，不会触发节点销毁重建，因此不会失焦、键盘不会收起。

正确的修复方案 #

将Input组件移到App组件外部定义，需要用到的text、onChangeText通过props传递即可，示例代码如下：

const Input = ({text, onChangeText}) => {
  return (
    <TextInput
      value={text}
      placeholder="dioporco"
      style={{ fontSize: 50 }}
      onChangeText={onChangeText}
    />
  );
};

export default function App() {
  const [text, setText] = useState("");
  const onChangeText = useCallback((t) => setText(t), []);
  return (
    <View style={styles.container}>
      <Input text={text} onChangeText={onChangeText} />
    </View>
  );
}

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