Как реализовать общий ввод панели поиска в навигаторах стека/вкладки, используя реагирующую навигацию?

Пользовательский интерфейс Snapchat в настоящее время настроен с плавающим заголовком SearchBar, который, кажется, используется на нескольких экранах/вкладках. Я хотел бы воспроизвести общий заголовок SearchBar, используя реагирующую навигацию. В настоящее время у меня есть полурабочее решение...

Наполовину работающее решение

В настоящее время, несмотря на то, что у меня установлен заголовок HeadTitle в StackNavigator, кажется, что заголовок отображает совершенно новую панель поиска (вы можете видеть легкое мерцание, указывающее на ее отображение) при переходе на экран результатов поиска.

Вот настройки, которые у меня сейчас есть для одного из стеков в моем TabNavigator.

function NetworkStack({ route, navigation }) {
    return (
        <Network.Navigator
            initialRouteName="NetworkEventList"
            screenOptions={({ navigation, route }) => ({
                headerTitle: () => <Search navigation={navigation} route={route} stackName={"NetworkStack"}/>,
            })}>
            <Network.Screen
                name="NetworkSearchResults"
                component={SearchResults}
                options={({ navigation, route }) => ({
                    //headerTitle: () => <Search navigation={navigation} route={route} focused={true} stackName={"NetworkStack"}/>,
                    headerBackImage: () => <BackButton navigation={navigation} shouldPop={true}/>,
                    headerBackTitleVisible: false,
                    gestureEnabled: true
                })}/>
            <Network.Screen
                name="NetworkEventList"
                component={NetworkEventList}
                options={({ navigation, route }) => ({
                    headerLeft: () => <ProfileSidebarButton navigation={navigation}/>,
                    //headerTitle: () => <Search navigation={navigation} focused={false} stackName={"NetworkStack"}/>,
                    headerRight: () => <CommunityButton navigation={navigation} stackName={"NetworkStack"}/>
                })}/>
        </Network.Navigator>
    )
}

Ниже мой TabNavigator.

function TabNavigator({ navigation, route }) {
    return (
        <Tab.Navigator
            initialRouteName="NetworkStack"
            tabBar={props => <TabBar {...props}/>}>
            <Tab.Screen
                name="CheckInStack"
                component={CheckInStack}/>
            <Tab.Screen
                name="NetworkStack"
                component={NetworkStack}/>
            <Tab.Screen
                name="MapStack"
                component={MapStack}/>
        </Tab.Navigator>
    );
}

Логика перехода к компоненту результатов поиска находится внутри прослушивателя ввода onFocus. Вот код для этого...

const searchBarFocus = () => {
        switch(props.stackName) {
            case "MapStack":
                var searchType = props.searchGoogle ? "AddEstablishment" : "ViewingEstablishments";
                props.navigation.navigate('MapSearchResults', {searchType: searchType});
                break;
            case "NetworkStack":
                props.addingMarkers(false);
                var searchType = props.searchForPosting ? "ViewingEstablishments" : "ViewingUsers";
                let index = null;
                let routeState = props.route.state;
                if(routeState) index = routeState.index;
                if(index !== 1) {
                    console.log(props.navigation);
                    props.navigation.navigate('NetworkSearchResults', {searchType: searchType});
                }
                break;
            case "CheckInStack":
                props.addingMarkers(false);
                props.navigation.navigate('CheckInSearchResults', {searchType: "ViewingUsers"});
                break;
        }
    }

Как мне настроить свои элементы навигации, чтобы у меня был единственный элемент SearchBar, который монтируется один раз? Вы можете видеть на загруженном мной gif-файле, что панель поиска также теряет фокус при навигации, это также связано со вторым рендерингом/монтированием моего компонента поиска. Любые предложения будут высоко ценится!


person Tristan Heilman    schedule 08.05.2020    source источник


Ответы (1)


Я смог найти решение своего вопроса. Не стесняйтесь комментировать или давать лучший ответ. Я использую панель поиска react-native-elements для создания элемента поиска/ввода в заголовке моих навигационных стеков. Первоначально это был вид, обертывающий компонент SearchBar. Я изменил это на TouchableOpacity, чтобы я мог прослушивать событие onPress. Это новый элемент, который я построил. Я сохранил исходную конфигурацию навигации, указанную в вопросе.

return (
        <TouchableOpacity style={[styles.mainContainer, {width: SEARCH_BAR_WIDTH_UNFOCUSED}]} onPress={() => searchBarPress()}>
            <SearchBar
                id={"searchBar-"+ props.stackName}
                platform="ios"
                ref={search => searchRef = search}
                value={searchInput}
                containerStyle={styles.searchInputContainerWrapper}
                inputContainerStyle={styles.searchInputContainer}
                inputStyle={{color: styles.inputContainer.color}}
                round={true}
                autoFocus={props.route.params ? true : false}
                pointerEvents={props.route.params ? "auto" : "none"}
                cancelButtonTitle="Cancel"
                cancelButtonProps={{color: '#707070'}}
                onChangeText={updateSearch}
                //onFocus={searchBarFocus}
                onCancel={() => console.log("Cancel")}
            />
        </TouchableOpacity>
    )

Ключевыми частями создания Snapchat, такого как заголовок панели поиска, являются свойства autoFocus и pointerEvents. Значения свойств должны зависеть от того, на каком экране в данный момент находится пользователь.

введите здесь описание изображения

person Tristan Heilman    schedule 13.05.2020
comment
привет, я пытаюсь сделать то же самое, но вместо того, чтобы иметь панель поиска в заголовке, я возвращаю ее как компонент на моем экране. Можно ли мне помочь? - person kd12345; 30.11.2020