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

Question

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

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

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

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

预期结果 设置状态但不会失去焦点或重新渲染

小吃、代码示例、屏幕截图或存储库链接： 世博会示例 https://snack.expo.io/@ksi9302/1f9369

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

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

1. 摆脱所有样式。
2. 使用类 react 组件制作自定义输入组件，禁用 shouldComponentUpdate
3. 不绑定值
4. 制作不同的状态结构并在对象内实际传递{}
5. 制作虚拟钥匙

我知道会起作用的

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

恶意妥协

• 使用 AutoFocus={true} //在 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;