Question

我在实施搜索体验时遇到了问题。

我有一个反应原生屏幕，其头部带有SearchBar。当我专注于SearchBar的TextInput时，会显示另一个屏幕，其中有三个嵌套的顶部选项卡，用于指示最高结果和2个子组结果。

我想继续关注SearchBar中的TextInput，同时仍然可以点击标签，显示不同的查询结果。

我使用react-native-router-flux进行路由，并将react-native-search-box用作SearchBar。

   <Scene key="challengeStack" icon={ChallengesIcon}>
    <Scene key="search" currentUserId={currentUser.id} navBar={SearchHeader} headerMode="none">
      <Scene
        key="searchResultsTabs"
        tabs
        swipeEnabled
        tabBarPosition="top"
        upperCaseLabel={false}
        indicatorStyle={{ backgroundColor: '#36c99d' }}
        showLabel
        inactiveTintColor="#343942"
        activeTintColor="#343942"
      >
        <Scene key="searchResults" tabBarLabel="Top" component={SearchResults} />
        <Scene
          key="peopleResults"
          tabBarLabel="People"
          currentUserId={currentUser.id}
          component={Feed}
        />
        <Scene
          key="challengeResults"
          tabBarLabel="Challenges"
          currentUserId={currentUser.id}
          component={Feed}
        />
      </Scene>
    </Scene>

我的SearchBar：

 <View
  style={{
    paddingTop: 20,
    backgroundColor: 'white',
    borderBottomColor: 'gainsboro',
    borderBottomWidth: StyleSheet.hairlineWidth,
    paddingBottom: 5,
    paddingHorizontal: 4,
  }}
>
  <Search
    backgroundColor="white"
    titleCancelColor="#343942"
    placeholderExpandedMargin={30}
    onChangeText={text => onChangetext(text)}
    blurOnSubmit={false}
    keyboardDismissOnSubmit={false}
    onFocus={() => Actions.replace('searchResults')}
    onCancel={() => Actions.replace('categories')}
  />
</View>

React Native：在切换嵌套选项卡时保持对标题中textInput的关注

0 个答案: