在我的React Native 0.70应用中,有2个组件Home
(父项)和ListSearch
(子),用户在Home
中输入服务器字符串,搜索结果显示在ListSearch
中,当用户点击ListSearch
上的navigation.goBack()
返回到Home
时,react navigation 6.x中的useFocusEffect
用于重置Home
中搜索栏上的占位符。以下是Home
(父级)中用于重置占位符的代码:
export default Home = ({ navigation}) => {
const searchHolder = "Enter search string here";
const [plcholder, setPlcholder] = useState(searchHolder);
const submitsearch = async () => {
...
setPlcholder(searchHolder);//reset place holder
navigation.navigate("ListSearch", {artworks:res, title:"Search Result"}). //<<==ListSearch is component of result displaying
}
//reset placeholder whenever the Home is focused.
useFocusEffect(
React.useCallback(() => {
setPlcholder(searchHolder); // reset the place holder search bar
},[navigation])
);
//view
return (
...
<View style={{flex:5}}>
<TextInput style={{fontSize:hp("3%")}} placeholder={plcholder} onChangeText={strChg}></TextInput>. //plcholder here
</View>
)
}
上面的代码不起作用。当用户navigation.goBack()
到Home
组件时,搜索栏中的占位符是以前的搜索字符串,没有更新。
1条答案
按热度按时间ehxuflar1#
当您导航到
ListSearch
时,占位符字符串会更新,您应该将TextInput的value
设置为空字符串,以下是您可以参考的代码,Here是我创建的演示。