具有动态高度的 ScrollView 内的 createMaterialTopTabNavigator

Question

有什么方法可以创建像具有动态高度的 ScrollView 之类的东西吗？

关于我们正在尝试做的事情的详细信息：

我们在ScrollView 中创建了一个顶部标签栏（使用createMaterialTopTabNavigator）。一切正常，除了 ScrollView 的高度。 Let's assume there are 3 tab screens with different heights: TabScreen1: 800, TabScreen2: 400, TabScreen3: 300... At rendering, the ScrollView takes the greatest height, and when Tab2 or 3 is selected, the height of our ScrollView remains at 800，所以 Tab2 和 3 有滚动空间。

Answer 1

正如我所承诺的，这就是我们解决它的方法。

在你有ScrollView 的班级中，你需要一个类似的状态

const [activeTab, setActiveTab] = useState('tab1') //your default (first) tab

稍后，您希望每次更改选项卡时都更改该状态：

<TabsStack.Screen
  name={'tab1'}
  component={
    activeTab === 'tab1' ? Tab1Screen : DefaultScreen
  }
  listeners={{ focus: () => setActiveTab('tab1') }}
/>

现在，每当一个选项卡被取消选择或没有聚焦时，它都会显示 DefaultScreen 这是一个空视图，并且 没有高度，例如：

const DefaultScreen = () => (
  <Box
    flex={1}
    py={20}
    alignItems="center"
    justifyContent="center"
    bg="background"
  >
    <ActivityIndicator size="large" color="white" animating />
  </Box>
)

在我的情况下（见上面的问题），每次我从 Tab1.1.1 切换到 Tab1.1.2 时，Tab1.1.1 都会更改为 DefaultScreen

Answer 2

试试这样的， 将父小部件的高度固定为您希望该选项卡导航器拥有的最大屏幕高度。

<ListView or ScrollView>
 <View style={{height:  (width)/(0.8)}} >
    <Tab.Navigator tabBar={(props) => <TabBar {...props} />}>
      <Tab.Screen name="T1" component={T1} />
      <Tab.Screen name="T2" component={T2} />
      <Tab.Screen name="T3" component={T3} />
    </Tab.Navigator>
   </View>
</ ListView or ScrollView>

对于标签做这样的事情

T1->

<View style={styles.container}>
  <ScrollView nestedScrollEnabled={true}>
    <FlatList
      numColumns={3}
      data={allMedia}
      keyExtractor={(item) => item.id}
      listKey={(post) => `${post.id}D`}
      renderItem={({ item }) => (Anything)}
      scrollEnabled ={false}
    />
  </ScrollView>
</View>

记得在选项卡的 FlatList 中禁用滚动视图，并使用带有 nestedScrollEnabled={true} 的 ScrollView 进行包装

Answer 3

不需要将 TabNavigator 放在 ScrollView 中。将 ScrollView 放在每个 TabScreen 内

回答您的问题：如果您的 ScrollView 与内容的高度相同，则它不会滚动。您可能在谈论 ScrollView 的 contentContainer 的高度。动态设置它的唯一方法是使用onLayout 测量当前选定选项卡的内容高度，将此数字保存到状态并将其应用为滚动视图的contentContainerStyle 属性中的高度。除非绝对必要，否则我不建议以这种方式破解它