4

Snapchat 的 UI 目前设置有一个浮动的 SearchBar 标题，该标题似乎在几个屏幕/标签之间共享。我想使用 react-navigation 复制共享的 SearchBar 标头。我目前有一个半工作的解决方案......

半工作解决方案

目前，即使我在 StackNavigator 上设置了 headerTitle，但在导航到搜索结果屏幕时，标题似乎正在呈现一个全新的 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>
    );
}

导航到搜索结果组件的逻辑位于输入的 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 中看到搜索栏也失去了对导航的关注，这也是由于我的搜索组件的第二次渲染/安装。我们欢迎所有的建议！

4

2 回答 2

0

我能够找到我的问题的解决方案。随意评论或提供更好的答案。我使用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 属性。属性值需要取决于用户当前在哪个屏幕上。

在此处输入图像描述

于 2020-05-13T02:08:05.617 回答
0

我认为，好的方法是创建一个单独的组件，打算成为一个搜索组件，然后当搜索发生时，结果存储在全局状态中，作为上下文或 redux 存储

//search.js

const SearchBar = (props) => {...}; //which have access to the global state

//then on your routes 

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => (
            <SearchBar/>
          ),
        }}
      />

    <Stack.Screen
        name="Users"
        component={UsersScreen}
        options={{
          headerTitle: props => <LogoTitle {...props} />,
          headerRight: () => (
            <SearchBar/>
          ),
        }}
      />
    </Stack.Navigator>
  );
}
于 2022-02-15T13:35:46.030 回答