使用堆栈导航在自定义标头之间传递文本输入

Question

我想使用堆栈导航的自定义标头连接SearchMain、SearchHistoryList和SearchResult屏幕。

起初，SearchMain屏幕出现，当自定义标题中的TextInput为onFocus时，出现SearchHistory屏幕，当TextInput处于SubmitEditing或按下SearchButton时，就会出现SearchResult屏幕。

此外，我设置了在切换屏幕时保持键盘焦点，并在我想关闭它时使用keyboard.dediscuss((。

但是，如果在屏幕更改后立即在自定义标题的TextInput处输入内容，则会在上一屏幕的TextInput中输入。

我认为这是因为三个屏幕没有共享一个自定义标题！！每个标题都被创建，键盘聚焦在前一个屏幕上！！

我希望所有屏幕都使用相同的标题，或者标题的值是一致的。

我该怎么办才能解决这个问题？我进行了各种搜索，如singleton标头、静态标头和标头值一致，但没有好的解决方案。

我最近开始学习React Native，所以我不确定我的方法，完全不同的方法也很受欢迎~~

下面是我的代码，谢谢。

const Stack = createStackNavigator();
function NavigationBar({navigation}){
const [query, setQuery] = React.useState('');
function changeSearchQuery(text : string) : void {
setQuery(text);
}
function deleteSearchQuery() : void {
setQuery("");
}
return(
<InputView>
<BackIcon onPress={() => {navigation.goBack()
Keyboard.dismiss()}}>
<Icon name="arrow-back-ios" size={widthPercentage(24)} color="#666666"/>
</BackIcon>
<InputText
keyboardType="default"
maxLength={100}
onChangeText={(str) => setQuery(str)}
value = {query}
placeholder="검색어 입력"
placeholderTextColor="#E9E9E9"
returnKeyType="search"
onFocus={() => navigation.navigate("SearchHistory", {changeSearchQuery:changeSearchQuery})}
onSubmitEditing={() => {navigation.navigate("SearchResult", {changeSearchQuery:changeSearchQuery})
Keyboard.dismiss()}}
allowFontScaling= {false}
/>
{ query.length > 0 && 
<DeleteIcon onPress={() => deleteSearchQuery()}>
<Icon name="clear" size={widthPercentage(20)} color="#666666"/>
</DeleteIcon>
}

<SearchIcon onPress={() => {navigation.navigate("SearchResult")
Keyboard.dismiss()}}>
<Icon name="search" size={widthPercentage(20)} color="#666666"/>
</SearchIcon>
<Line></Line>
</InputView>
);
}
export const Search = () =>{
return (
<Stack.Navigator initialRouteName="SearchMain" keyboardHandlingEnabled={false} screenOptions={{header:props => <NavigationBar navigation={props.navigation}/>}}>
<Stack.Screen name="SearchMain" component={SearchMain} options={{animationEnabled: false}}/>
<Stack.Screen name="SearchHistory" component={SearchHistory} options={{animationEnabled: false}}/>
<Stack.Screen name="SearchResult" component={SearchResult} options={{animationEnabled: false}}/>
<Stack.Screen name="SearchFilter" component={SearchFilter} options={{headerShown: false}}/>
</Stack.Navigator>
);
}
export default Search;

Answer 1

在标头中设置状态不是一个好模式，相反，您应该将状态集中在组件中，然后使用navigation.setOption传递函数/状态值。

通过这种方式，您的标题将如下所示：

function NavigationBar({
query,
onFocus,
onChangeText,
onPressBackIcon,
onSubmitEditing,
onDeleteSearch,
onSearch
}){
return(
<InputView>
<BackIcon onPress={onPressBackIcon}>
<Icon name="arrow-back-ios" size={widthPercentage(24)} color="#666666"/>
</BackIcon>
<InputText
keyboardType="default"
maxLength={100}
onChangeText={onChangeText}
value = {query}
placeholder="검색어 입력"
placeholderTextColor="#E9E9E9"
returnKeyType="search"
onFocus={onFocus}
onSubmitEditing={onSubmitEditing}
allowFontScaling= {false}
/>
{ query.length > 0 && 
<DeleteIcon onPress={onDeleteSearch}>
<Icon name="clear" size={widthPercentage(20)} color="#666666"/>
</DeleteIcon>
}

<SearchIcon onPress={onSearch}>
<Icon name="search" size={widthPercentage(20)} color="#666666"/>
</SearchIcon>
<Line></Line>
</InputView>
);
}

您将在SearchMainScreen中拥有您的状态、功能和自定义标题：

// remember headerMode='none' in screen option
const SearchMainScreen = () => {
const [query, setQuery] = React.useState('');
const onFocus = () => {}
...
return (
<View>
<NavigationBar
onFocus={onFocus}
query={query}
...
/>
{
(isFocus && !query) ? 
<SearchHistoryComponent/> : 
(isFocus && query) ? 
<SearchResultComponent/> :
<List/>
}
</View>
)
}