react-native - React Navigation Top Bar 获得相同的高度(NOT)依赖于它自己的组件

Question

看着这个example来自 React Navigation 网站，在 Chat 和 Contacts 之间，高度是相互独立的。但是，当我尝试实现顶栏时，高度是相同的。它采用其中包含最多内容的选项卡的高度。

但在示例中，您可以看到在“联系人”中可能有更多联系人可以在其中滚动，而在“聊天”中，输入字段位于底部，使其看起来像是它停止的地方。

这是示例的屏幕截图:

聊天选项卡

联系人选项卡

这是我的一些代码和我遇到的情况:

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

测试组件

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

新标签组件

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

请注意新标签如何在红色和橙色之间有很大的差距，这是从测试标签的高度开始的。

Answer 1

您正在将整个导航器呈现为 FlatList“标题”。您甚至不应该在此组件中使用 Flatlist。每个屏幕都有不同数量的项目，并且应该有自己的 Flatlist。

解决这个问题:

• 从您的主要组件中移除 FlatList(使用 backgroundColor: 'orange')，并仅在该渲染函数中渲染 Tab Navigator。

• 在 TestComponent 和 NewTabComponent 内部，如果需要，渲染一个 ScrollView(或 FlatList)。

• 所有屏幕(TestComponent 和 NewTabComponent)都应该有一个 height: '100%' 或 flex: 1 如果你想让所有屏幕都占满屏幕空间，即使其实际高度小于屏幕高度。