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

Question

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

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

Вот настройки, которые у меня есть для одного из стеков внутри моего 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>
    );
}

Лог c, который переходит к компоненту результатов поиска, находится внутри 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;
        }
    }

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

Answer 1

Я смог найти решение своего вопроса. Не стесняйтесь комментировать или дать лучший ответ. Я использую панель поиска react-native-elements для создания элемента поиска / ввода в заголовке моих стеков навигации. Первоначально это был View, обертывающий компонент 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. Значения свойств должны зависеть от того, на каком экране в данный момент находится пользователь.