TextInput失去焦点

Question

基本上，我有一个表单，其中包含一个字段列表，其中还包括TextInput。

我遇到的问题是，每次用户将焦点放在TextInput上时，它都会立即失去焦点，而且当用户键入时，我也会设置状态。此外，在用户输入时，它会有一个轻微的延迟，而不是当用户第一次将它放入焦点时，它会立即失去焦点。

我在自己的设备上调试时不会遇到这个问题，只有在其他设备上调试时才会遇到这个问题。

这只是实际代码的简化版本：

const data = [
  {
    options: [],
    type: "text",
    required: true,
    label: "first name"
  },
  {
    options: [],
    type: "text",
    required: true,
    label: "last name"
  }
];

function App() {
  const [names, setNames] = React.useState({});

  return (
    <FlatList
      data={data}
      keyExtractor={({ label }) => label}
      renderItem={({ item }) => {
        const { type, label, options, required } = item;

        return (
          <TextInput
            placeholder={label}
            value={names[label]}
            onChangeText={value => {
              setNames({...names, [label]: value});
            }}
          />
        );
      }}
    />
  );
}

我不确定是设备的问题，还是react本地的问题，或者是我的代码的问题。

Answer 1

我设法解决了这个问题，我不知道为什么，但上面提到的行为只发生在列表底部或接近列表底部的TextInput元素上。

我认为这与元素在弹出键盘时的行为方式有关。也许是FlatList呈现项目的方式。在我将其更改为ScrollView并只是在数据上进行映射后，问题就解决了。