Reaction Navigation Top Bar获取相同的高度（NOT）取决于其自身的组件

Question

bounty到期在6天内。该问题的答案有资格获得+ 100声望赏金。hellomello正在寻找规范答案。

从React Navigation网站上的example来看，在聊天和联系人之间，高度彼此独立。但是，当我尝试实现顶部栏时，高度是相同的。它使用哪个标签中内容最多的高度。

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

这是示例中的屏幕截图：

聊天标签

“联系人”标签

这是我的一些代码以及正在经历的事情：

<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

设置每个屏幕的弹性，例如：

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

Answer 2

我不知道为什么要在FlatList中渲染它，因为它还从Scroll View继承了props。

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

并在TestComponent或NewTabComponent内部移动FlatList和其他业务逻辑。

重点是不要在ScrollView或FlatList或SectionList中渲染选项卡，因为它们都继承了ScrollView的道具。

Answer 3

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

解决此问题：

• 从主要组件中删除FlatList（使用backgroundColor: 'orange'，并仅在该渲染功能中渲染Tab导航器。

• 在TestComponent和NewTabComponent的内部，根据需要呈现ScrollView（或FlatList）。

• 所有屏幕（TestComponent和NewTabComponent）都应具有height: '100%'或flex: 1，如果您希望所有屏幕占用屏幕的所有空间，即使其实际高度小于屏幕高度也是如此。 >