如何使用createMaterialTopTabNavigator作为组件

Question

嘿，我有一个搜索屏幕“搜索歌曲/歌手” ，所以在发送请求后，我想显示一个“顶部标签”，因此我在其中添加了顶部标签"createMaterialTopTabNavigator"分离文件，然后将其作为组件导入，以在<SearchTabs />这样的搜索屏幕中使用它，但是我遇到了错误

不变违反：为此缺少导航道具 航海家。在react-navigation v3和v4中，您必须设置您的应用 容器直接。更多信息： https://reactnavigation.org/docs/en/app-containers.html

lib

"react-navigation": "^4.1.0",
"react-navigation-drawer": "^2.3.3",
"react-navigation-stack": "^2.0.16",
"react-navigation-tabs": "^2.7.0",

顶部标签代码

import {createMaterialTopTabNavigator} from 'react-navigation-tabs';
import resultArtists from './resultArtists';
import resultSongs from './resultSongs';

const SearchTabNavigator = createMaterialTopTabNavigator(
  {
    Songs: {
      screen: resultSongs,
      navigationOptions: {
        tabBarLabel: 'Songs',
      },
    },
    Artists: {
      screen: resultArtists,
      navigationOptions: {
        tabBarLabel: 'Artists',
      },
    },
  },
);
export default SearchTabNavigator;

然后我像这样将其导入createStackNavigator'Root.js导航文件'

 SearchTabs: {
    screen: SearchTabNavigator,
  },

这是搜索代码“其中包含输入内容，然后我要显示顶部标签”

class Search extends PureComponent {


 render() {
    return (
      <Container style={styles.container}>
        <View style={styles.searchHeader}>
          <Input
            onChangeText={text => this.search(text)}
            value={this.state.searchText}
            onSubmitEditing={this.onSearch}
            returnKeyType="search"
            placeholderTextColor="white"
            style={styles.searchInput}
          />
        </View>

        <SearchTabNavigator />

     </Container>

      )
 }

}

export default Search;

最终结果应该是这样

我尝试过的

我添加新的createAppContainer来将“顶部”标签包裹在“顶部标签”文件中

export const Tabs = createAppContainer(SearchTabNavigator);

而且工作正常。

但是我认为这是错误的方法，在同一个应用程序中添加两个AppContainer：\

当我想从任何项目“歌曲”导航到“播放器”屏幕“它在不同的AppContainer中”时，它就无法正常工作。