我将扩展我在评论中所写的内容,因为它写得很快而且不够清晰。
让我们以以下内容为起点(我删除了无用的信息):
function YourComponent() {
const [inputSearch, setInputSearch] = useState('');
return (
<View>
<StatusBar backgroundColor="#11131B" barStyle="light-content" />
<View>
<FlatList
ListHeaderComponent={() => (
<>
<Text>Search :</Text>
<TextInput
value={inputSearch}
onChangeText={setInputSearch}
placeholder="Username"
/>
</>
)}
data={[]}
renderItem={() => <View />}
/>
</View>
</View>
);
}
每次你打电话setInputSearch
组件再次呈现,但这意味着每次都会调用您在 ListHeaderComponent 中内联传递的箭头函数,并且将再次创建内容(键盘关闭,因为焦点所在的输入不再存在,因为它已经被新的替换了)。
你怎么解决这个问题? ListHeaderComponent 接受构造函数和 ReactElement,因此您要么传递 ReactElement,要么创建一个“独立”组件(没有特定含义,它只是一个独立的组件,而不是在另一个组件内)。
这里有几个解决方案:
- ReactElement 示例(注意,组件是直接传递的,ListHeaderComponent 中没有函数;如果需要,您也可以将其提取为另一个组件):
function YourComponent() {
const [inputSearch, setInputSearch] = useState('');
return (
<View>
<StatusBar backgroundColor="#11131B" barStyle="light-content" />
<View>
<FlatList
ListHeaderComponent={
<>
<Text>Search :</Text>
<TextInput
value={inputSearch}
onChangeText={setInputSearch}
placeholder="Username"
/>
</>
}
data={[]}
renderItem={() => <View />}
/>
</View>
</View>
);
}
- 独立组件(将构造函数传递给 ListHeaderComponent):
function YourComponent() {
return (
<View>
<StatusBar backgroundColor="#11131B" barStyle="light-content" />
<View>
<FlatList
ListHeaderComponent={ListHeaderComponent}
data={[]}
renderItem={() => <View />}
/>
</View>
</View>
);
}
function ListHeaderComponent() {
const [inputSearch, setInputSearch] = useState('');
return (
<>
<Text>Search :</Text>
<TextInput
value={inputSearch}
onChangeText={setInputSearch}
placeholder="Username"
/>
</>
);
}
但这不允许您在 YourComponent 中使用 inputSearch 值。
我希望这有助于解决问题。