Как использовать createMaterialTopTabNavigator в качестве компонента - PullRequest
Новая
       82

Как использовать createMaterialTopTabNavigator в качестве компонента

1 голос
/ 20 марта 2020

Эй, у меня есть экран поиска "поиск песен / исполнителей" Так что после отправки запроса я хочу отобразить "Верхние вкладки", поэтому я добавляю верхнюю вкладку "createMaterialTopTabNavigator" внутри отдельных файлов и затем импортируйте его как компонент, чтобы использовать его внутри экрана поиска, как это <SearchTabs /> Но я получил ошибку

Инвариантное нарушение: для этого навигатора отсутствует навигационная опора. В реакции-навигации 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;

Окончательный результат должен быть примерно таким

s

То, что я пробовал

Я добавляю новый createAppContainer, чтобы обернуть верхние вкладки, как это в 'Top Файл вкладок '

export const Tabs = createAppContainer(SearchTabNavigator);

И он работает нормально.

, но я думаю, что это неправильный способ, добавить два AppContainer в одно приложение: \

И когда я хотите перейти от любого элемента «песни» к экрану проигрывателя «он находится в другом AppContainer», он не работает!

...