Верхняя панель навигации React получает одинаковую высоту (НЕ) в зависимости от ее собственных компонентов

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

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

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

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

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

Я понятия не имею, почему вы его рендерируете внутри 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.

После долгого исследования я обнаружил, что ваша проблема в том, что в response-native-tab-view (который используется material-tob-tabs) есть следующий код:

_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.

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

Чтобы иметь высоту в соответствии с содержимым внутри конкретной вкладки, используйте Scrollview внутри каждой вкладки. Поблагодарите меня позже, если это сработает идеально. :)

import * as React from "react";
import { ScrollView, Text, View } from "react-native";
import { createMaterialTopTabNavigator } from "@react-navigation/material-top-tabs";

function Screen1() {
  return (
    <ScrollView>
      <View style={{ flex: 1, alignItems: "center" }}>
        <Text style={{ padding: 10 }}>Screen1 </Text>
      </View>
    </ScrollView>
  );
}

function Screen2() {
  return (
    <ScrollView>
      <View style={{ flex: 1, alignItems: "center" }}>
        <Text style={{ padding: 10 }}>Screen2</Text>
      </View>
    </ScrollView>
  );
}

function Screen3() {
  return (
    <ScrollView>
      <View style={{ flex: 1, alignItems: "center" }}>
        <Text style={{ padding: 10 }}>Screen3 </Text>
      </View>
    </ScrollView>
  );
}

const Tab = createMaterialTopTabNavigator();

export default function TopBarNavigator() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Screen1" component={Screen1} />
      <Tab.Screen name="Screen2" component={Screen2} />
      <Tab.Screen name="Screen3" component={Screen3} />
    </Tab.Navigator>
  );
}