Snapchat的用户界面当前使用浮动的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文件中看到,搜索栏也失去了对导航的关注,这也归因于我的Search组件的第二次渲染/安装。我们欢迎所有的建议!
Snapchat的用户界面当前使用浮动的SearchBar标头设置,该标头似乎在多个屏幕/选项卡之间共享。我想使用react-navigation复制共享的SearchBar标头。我...
我能够找到问题的解决方案。随时发表评论或提供更好的答案。我使用react-native-elements Search Bar在导航堆栈的标题处创建搜索/输入元素。最初,这是一个包装SearchBar组件的View。我将其更改为TouchableOpacity,以便可以监听onPress事件。这是我构造的新元素。我保留了问题中提供的原始导航配置。