在自定義組件中調用 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;