миграция с v1 на v3, вложенные вкладки

Question

Я разрабатывал приложение React Native чуть более года, и я все время использовал v1 и никогда не обновлял его.

«реакция-навигация»: «^ 1.5.11»,

Приложение работает отлично и используется пользователями. Теперь, когда у меня есть время дышать, я решил перейти с v1 на v3.

В v1 я сделал что-то вроде этого,

const FacilitySearchTabs = TabNavigator({
    Property: {
        screen: PropertyTab,
        navigationOptions: {
            tabBarLabel: I18n.t('tabTitleProperty')
        }
    },
    Building: {
        screen: BuildingTab,
        navigationOptions: {
            tabBarLabel: I18n.t('tabTitleBuilding')
        }
    }
}, {
    ...
});

<SafeAreaView style={{ flex: 1, backgroundColor: 'white' }}>

    <View style={styles.container}>

        <CustomSearchBar
            onChangeText={this.setSearchPhrase}
            onSubmitEditing={this.onSearchPress}
            placeholder={I18n.t('searchEntities')} />

        <FacilitySearchTabs
            screenProps={{
                navigation: this.props.navigation,
                searchPhrase: this.state.searchPhrase,
                onDrillDownPress: this.onDrillDownPressCallback,
                onItemPress: this.onItemPressCallback,
                selectedEntityId: selectedEntity.FmEntityId
            }} />

    </View>

</SafeAreaView>

Я сделал это таким образом, потому что в моем пользовательском интерфейсе должен был быть только один поисковый ввод, который отфильтровывал бы все списки в каждой вкладке одновременно на основе пользовательского ввода. Поэтому независимо от того, проводит ли пользователь вкладки влево или вправо, поисковый ввод остается неизменным.

Естественно, в v3 все, что я думал, мне нужно было изменить, это то, как создается TabNavigator, но я получил следующую ошибку,

Нарушение Инварианта: Нарушение Инварианта: Опора навигации отсутствует для этого навигатора. В реакции-навигации 3 вы должны настроить свой Контейнер приложения напрямую. Больше информации: https://reactnavigation.org/docs/en/app-containers.html

Я уже настроил свой контейнер приложений, так что это не проблема, и я знаю, как он работает, это экран, который появляется после того, как пользователь прошел начальный экран.

Внимательно читая ошибку, я сделал следующее изменение,

<Tabs navigation={this.props.navigation} />

и начал получать другую ошибку.

TypeError: TypeError: «Маршруты» не найдены в состоянии навигации. Ты попробуйте передать навигационную опору компонента React навигатору ребенок? Увидеть https://reactnavigation.org/docs/en/custom-navigators.html#navigator-navigation-prop

Я следовал инструкциям на https://reactnavigation.org/docs/en/custom-navigators.html#navigator-navigation-prop, ошибки исчезли, но мои вкладки не отображаются. Вот код из моей закусочной.

import React from 'react';
import {
  ActivityIndicator,
  AsyncStorage,
  Button,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';
import AllTab from './allTab';
import BuildingsTab from './buildingsTab';

const Tabs = createMaterialTopTabNavigator({
  All: AllTab,
  Buildings: BuildingsTab,
});

export default class FacilitySearchScreen extends React.Component {
  static navigationOptions = {
    title: 'Facility Search',
  };

  static router = {
    ...Tabs.router,
    getStateForAction: (action, lastState) => {
      // check for custom actions and return a different navigation state.
      return Tabs.router.getStateForAction(action, lastState);
    },
  };

  render() {
    return (
      <View style={styles.container}>
        <Button title="Actually, sign me out :)" onPress={this._signOutAsync} />
        <Tabs navigation={this.props.navigation} />
      </View>
    );
  }

  _signOutAsync = async () => {
    await AsyncStorage.clear();
    this.props.navigation.navigate('Auth');
  };

  _drillDownEntity = () => {
    this.props.navigation.navigate('EntityDrillDown');
  };

  _selectEntityAsync = async () => {
    await AsyncStorage.setItem('entityId', '123');
    this.props.navigation.navigate('App');
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

У меня есть 2 вопроса,

1. Почему вкладки не появляются и как это исправить?
2. Есть ли лучший способ добиться того же UI / UX, который я объяснил выше, лучше?

Здесь - закуска, которую я создал для этого. Если кто-то захочет разобраться в этом и помочь мне разобраться в этом, я буду очень благодарен. В App.js есть закомментированный фрагмент кода, который поможет вам начать работу.

Answer 1

Это была проблема стиля.Я был так сосредоточен на модуле реагирования и навигации, что мне не пришло в голову, что стиль может быть проблемой.Это исправлено, и я оставляю ссылку на закуску, как и для любого, кто исследует v3 в будущем.