Реагирование верхней панели навигации Получение одинаковой высоты (НЕ) в зависимости от ее собственных компонентов

Question

Глядя на этот пример с веб-сайта React Navigation, между чатом и контактами высоты не зависят друг от друга. Тем не менее, когда я попытался реализовать верхнюю панель, высоты были одинаковыми. Требуется высота, на которой когда-либо вкладка содержала наибольшее количество содержимого.

Но в примере вы можете видеть в Контактах, что может быть больше контактов, которые вы можете прокрутить, а в Чате поле ввода внизу, чтобы он выглядел так, как будто на этом останавливается.

Вот снимок экрана из примера:

Вкладка чата

Вкладка контактов

Вот некоторые из моих кодов и что я ' м испытывает:

<View style={{backgroundColor: 'orange'}}>
  {!loading &&
    !loadingProfileInfo &&
    typeof data.infoByUser !== 'undefined' && (
      <FlatList
        data={data.infoByUser}
        ListHeaderComponent={
          <View>
            <UserInfo />

            <Tab.Navigator>
              <Tab.Screen 
                name="Test" 
                component={TestComponent} />
              <Tab.Screen
                name="New Tab"
                component={NewTabComponent}
              />
            </Tab.Navigator>
          </View>
        }
        numColumns={2}
        renderItem={({item}) => (
          <View>
           // ...
          </View>
        )}
        keyExtractor={item => item._id}
      />
    )}
</View>

TestComponent

<View style={{backgroundColor: 'grey'}}>
  <View>
    <Text>Test Test</Text>
  </View>
  <View>
    <Text>Test Test</Text>
  </View>
  <View>
    <Text>Test Test</Text>
  </View>
  <View>
    <Text>Test Test</Text>
  </View>
  <View>
    <Text>Test Test</Text>
  </View>
</View>

NewTabComponent

<View style={{backgroundColor: 'red'}}>
  <Text>new tab</Text>
</View>

Обратите внимание, что в новой вкладке имеется большой разрыв между красным и оранжевым цветом, то есть с высоты вкладки Тест.

Answer 1

Вы отображаете весь свой навигатор как «заголовок» FlatList. Вы не должны даже использовать Flatlist в этом компоненте. Каждый экран имеет различное количество элементов и должен иметь собственный плоский список.

Чтобы исправить это:

• Удалите FlatList из основного компонента (с помощью backgroundColor: 'orange' ) и просто визуализируйте Tab Navigator в этой функции визуализации.

• Внутри TestComponent и NewTabComponent визуализируйте ScrollView (или FlatList), если вам это нужно.

• Все экраны (TestComponent и NewTabComponent) должны иметь height: '100%' или flex: 1, если вы хотите, чтобы все экраны занимали все пространство экрана, даже когда его реальная высота меньше высоты экрана.

Answer 2

После долгих исследований я обнаружил, что ваша проблема в том, что реакции-нативного представления вкладок (который используется в материалах-вкладках) имеет такой код:

_defineProperty(this, "handleLayout", e => {
  const {
    height,
    width
  } = e.nativeEvent.layout;

  if (this.state.layout.width === width && this.state.layout.height === height) {
    return;
  }

  this.setState({
    layout: {
      height,
      width
    }
  });

С опцией lazy = {true}, и используя компонент «Новая вкладка» на первой вкладке и «Тест» на второй, вы получите правильную высоту, пока не измените вкладку. Когда вы нажимаете «Тест», макет меняется, и высота увеличивается. После смены вкладки высота больше не меняется, потому что макет остается прежним («Новая вкладка» идеально вписывается в большую высоту) и не вызывает handleLayout из response-native-tab-view.

Hope Вы можете найти способ изменить макет снова при смене вкладок.

Answer 3

Я понятия не имею, почему вы отрисовываете его внутри FlatList, так как он также наследует реквизиты из Scroll View.

<View style={{backgroundColor: 'orange'}}>
  <Tab.Navigator>
      <Tab.Screen 
        name="Test" 
        component={TestComponent} />
      <Tab.Screen
        name="New Tab"
        component={NewTabComponent}
      />
  </Tab.Navigator>
</View>

и переместите FlatList и другие бизнес-логики внутри TestComponent или NewTabComponent.

Смысл в том, чтобы не отображать вкладки внутри ScrollView или FlatList или SectionList, поскольку они оба наследуют свойства ScrollView.

Answer 4

Установить флекс на экран как:

<View style={{backgroundColor: 'grey', flex: 1}}>
  <View>
    <Text>Test Test</Text>
  </View>
  <View>
    <Text>Test Test</Text>
  </View>
  <View>
    <Text>Test Test</Text>
  </View>
  <View>
    <Text>Test Test</Text>
  </View>
  <View>
    <Text>Test Test</Text>
  </View>
</View>

<View style={{backgroundColor: 'red', flex: 1}}>
  <Text>new tab</Text>
</View>