How to use createMaterialTopTabNavigator as a component

问题

Hey I have a search screen "search for songs/artists" So after sending the request i want to appear a "Top Tabs", So I add a Top tab "createMaterialTopTabNavigator" inside separate files and then import it as a component to use it inside Search Screen like this <SearchTabs /> But i got an error

Invariant Violation: The navigation prop is missing for this navigator. In react-navigation v3 and v4 you must set up your app container directly. More info: 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",

Top Tabs Code

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;

then i import it in createStackNavigator 'Root.js Navigation file' like this

 SearchTabs: {
    screen: SearchTabNavigator,
  },

here's Search Code "That contains input then i want to appear the top tabs"

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;

The final result should be something like this

What I tried

I add new createAppContainer to wrap the Top tabs like this in 'Top Tabs file'

export const Tabs = createAppContainer(SearchTabNavigator);

And it's working fine.

but i think it's the wrong way, to add two AppContainer in the same app :\

And when i want to navigate from any item "songs" to Player screen 'it's in Different AppContainer' it's not working!.

来源：https://stackoverflow.com/questions/60776851/how-to-use-creatematerialtoptabnavigator-as-a-component

标签

javascript

reactjs

react-native

react-navigation

react-navigation-stack