0

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

我有一个带有 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>

还有我的搜索栏：

 <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>
4

0 回答 0