javascript - React Native: ネストされたタブを切り替える間、ヘッダーの textInput にフォーカスを維持します

Question

検索エクスペリエンスの実装中に問題に直面しています。

SearchBar 付きのヘッダーを持つ反応するネイティブ画面があります。SearchBar の TextInput に注目すると、上位の結果と結果の 2 つのサブグループを示す 3 つの入れ子になったタブが上部に配置された別の画面が表示されます。

タブをタップして、さまざまなクエリ結果を表示しながら、SearchBar の TextInput に注目したいと思います。

ルーティングに react-native-router-flux を使用し、SearchBar として react-native-search-box を使用しています。

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