React Native 嵌套滚动视图和平面列表

Question

我正在使用 expo、nativewind 和 React Native。

我正在构建一个用户个人资料页面。

问题是我无法得到一个完全符合我想要做的解决方案。

我希望整个页面可滚动，我希望有 2 个选项卡，菜单项和评论，并且我希望所有内容都能正确滚动

我已经使用react-native-tab-view来实现tabview，但是使用我当前的代码，它不会显示菜单中的列表，除非我设置一个特定的高度，我不想硬编码，我觉得就是这样不是一个正确的解决方案

任何人都可以看到我的代码有什么问题，或者帮助我如何构建以获得我需要的结果，我也尝试过这个https://github.com/PedroBern/react-native-collapsible-tab-view包，但它不能按我想要的方式工作，而且我得到了奇怪的填充

有人可以帮忙吗。

谢谢你

这是目前的样子的图片

这是我当前的代码结构：

[id].tsx

const MenuRoute = () => (
  <ScrollView className="flex-1" nestedScrollEnabled>
    <ChefMenuItems />
  </ScrollView>
);

const ReviewsRoute = () => (
  <ScrollView className="flex-1 p-4" nestedScrollEnabled>
    ---------
  </ScrollView>
);

const ChefPage = () => {
 const [index, setIndex] = useState(0);

 const [routes] = useState([
    { key: "menu", title: "Menu Items" },
    { key: "reviews", title: "Reviews" },
  ]);


  const renderScene = SceneMap({
    menu: MenuRoute,
    reviews: ReviewsRoute,
  });

const renderTabBar = (props: any) => {
    return (
      <View className="flex-row border-b border-gray-200 bg-white">
        {props.navigationState.routes.map((route: { key: string; title: string }, i: number) => {
          const isActive = index === i;
          return (
            --------
          );
        })}
      </View>
    );
  };

return (
    <SafeAreaView className="flex-1 p-4 ">
      <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
        <BackButton />
         -
         -
          -
          {/* Tab Content */}
        <TabView
          navigationState={{ index, routes }}
          renderScene={renderScene}
          onIndexChange={setIndex}
          initialLayout={initialLayout}
          renderTabBar={() => renderTabBar({ navigationState: { index, routes } })}
          style={{}}
        />
      </ScrollView>
    </SafeAreaView>

ChefMenuItems.tsx

const ChefMenuItems = () => {
 -----

  const renderItem = ({ item }: { item: ListingType }) => <ImageListingCard listing={item} />;
  const renderLoaderItem = () => <ImageListingCardLoader />;

  return (
    <FlatList
      data={isLoading ? loadingItems : listings}
      keyExtractor={(item, index) => item?.id?.toString() || index.toString()}
      renderItem={isLoading ? renderLoaderItem : renderItem}
      showsVerticalScrollIndicator={false}
      scrollEnabled={false}
      numColumns={2}
      columnWrapperStyle={{ gap: 10, marginBottom: 10 }}
      contentContainerStyle={{ paddingBottom: 16 }}
    />
  );
};

export default ChefMenuItems;

Answer 1

如果

nestedScrollEnabled

不起作用，请尝试将React Native的ScrollView替换为react-native-gesture-handler

提供的组件

import { ScrollView, FlatList } from 'react-native-gesture-handler';