在自定义组件中调用 useState Hook 时反应本机 TextInput ReRenders

Question

描述当 TextInput 组件触发 onChangeText 或 onKeyPress 方法中的操作然后触发 setState 时，组件将重新渲染并失去焦点。

React Native 版本： 0.62（由于使用 Expo 无法升级）

重现问题的步骤 提供重现问题的详细步骤列表。

1. 创建一个简单的自定义包装器组件，例如
2. 声明 useStateHook
3. 通过直接 JSX 或自定义组件将 TextInput 传递给 Wrapper 组件
4. 将 setState function 绑定到 TextInput 的任何事件侦听器。

预期结果集 State 但不会失去焦点或重新渲染

小吃、代码示例、屏幕截图或存储库链接： Expo 示例https://snack.expo.io/69302/1f9

大家好，这是我向 React Native 提交的错误报告。 但我不确定我是否在这里做错了什么。

到目前为止我已经尝试过但不起作用

1. 摆脱所有 styles。
2. 使用 class 反应组件制作自定义输入组件，禁用 shouldComponentUpdate
3. 不绑定值
4. 制作不同的 state 结构并在 object {}
5. 制作虚拟钥匙

我所知道的会起作用

• 摆脱自定义包装器并使用普通 JSX（换句话说，不将 TextInput 作为子组件传递）//当应用程序变大时几乎不可能

糟糕的妥协

• 使用 AutoFocus={true} //on Web 工作正常，但在移动设备上，键盘闪烁很多。

Answer 1

取出包装器，因为它会由于搜索值的变化而不断重新渲染。

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

const Test = () => {
  const handleChange = e => {
    setSearch(e);
  };
  const [search, setSearch] = useState(null);

  return (
    <Wrapper>
      <TextInput
        value={search}
        onChangeText={e => {
          handleChange(e);
        }}
        placeholder="type here"
      />
    </Wrapper>
  );
};

const Wrapper = props => {
    return (
      <View
        style={{
          width: "100%",
          height: "100%",
          alignItems: "center",
          justifyContent: "center",
          display: "flex",
        }}
      >
        {props.children}
      </View>
    );
  };

export default Test;