ОБНОВЛЕНИЕ
Хорошо, я пошел немного дальше. Я заставил его работать, но он некрасивый и глючный :)
Что я хочу сделать - Я пытаюсь разделить поле поиска между двумя экранами. Фактически, почти идентично тому, как работает Yelp. Первый экран - это карта с полем поиска вверху. Когда вы щелкаете поле поиска, оно должно перейти на второй экран поиска, где вы вводите поисковый запрос или выбираете категорию поиска по умолчанию.
У меня есть приложение expo с навигатором нижней вкладки ( ТС). Позвольте мне вставить только важные части:
export default function BottomTabNavigator() {
return (
<BottomTab.Navigator initialRouteName="Search">
<BottomTab.Screen
name="Search"
component={SearchNavigator}
...
, а затем
const SearchStack = createStackNavigator<SearchParamList>();
function SearchNavigator() {
return (
<SearchStack.Navigator headerMode="none">
<SearchStack.Screen name="SearchScreen" component={SearchScreen} />
<SearchStack.Screen name="SearchFocusScreen" component={SearchFocusScreen} />
</SearchStack.Navigator>
);
}
SearchScreen
const [searchQuery, setSearchQuery] = useState('');
// If we returned from the second search screen with a search term, set it in state.
useEffect(() => {
if (route.params) {
setSearchQuery(route.params.searchTerm);
}
}, [route]);
const searchRef = useRef(null);
const onFocus = () => {
// If we have a search term, pass it to screen 2, then blur the input so we don't loop back.
if (route.params) {
setSearchQuery(route.params.searchTerm);
navigation.navigate('SearchFocusScreen', { searchTerm: searchQuery });
} else {
navigation.navigate('SearchFocusScreen');
}
searchRef.current.blur();
};
return (
<View>
<MapView ... />
<View>
<SafeAreaView>
<Searchbar
ref={searchRef}
placeholder="Search"
value={searchQuery}
onSubmitEditing={() => {
initSearch({ searchQuery, region });
}}
onFocus={onFocus}
/>
Второй экран поиска
const [searchQuery, setSearchQuery] = useState('');
const searchRef = useRef(null);
useEffect(() => {
searchRef.current.focus();
if (route.params) {
setSearchQuery(route.params.searchTerm);
}
}, [route]);
return (
<SafeAreaView>
<View>
<Searchbar
ref={searchRef}
placeholder="Search"
onChangeText={(query) => setSearchQuery(query)}
value={searchQuery}
onSubmitEditing={() => {
navigation.navigate('SearchScreen', { searchTerm: searchQuery }); // Pass the search query back to Search page 1
}}
...
Работает? Да. Но это неправильно. Также - есть проблема, когда я печатаю с ошибкой в поле поиска на экране поиска 2, я получаю предложения автокоррекции. Если я затем быстро нажму «Поиск», он автоматически исправит опечатку после отправки ошибки на экран поиска 1. И это видно.
Если у вас есть более эффективная стратегия для достижения этой цели, пожалуйста, сделайте это акция.