无法使用 react-native-paper 和 @react-navigation/bottom-tabs 滚动

Question

我有：

<PaperProvider theme={theme}>
  <NavigationContainer>
    <Tab.Navigator initialRouteName="Feed">
      <Tab.Screen
        name="Home"
        component={Conversations}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="home" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Explore"
        component={Conversations}
        options={{
          tabBarLabel: "Explore",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="find" size={size} color={color} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Conversations}
        options={{
          tabBarLabel: "Profile",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="setting" size={size} color={color} />
          ),
        }}
      />
    </Tab.Navigator>
  </NavigationContainer>
</PaperProvider>;

它加载正常，但我无法滚动。我也在使用 react-native-web 来尝试使其与网络兼容。

Answer 1

看来这实际上是 Expo 的问题，我想您正在使用它来测试您的应用程序。 React Navigation repo 中的这个问题描述了这个问题：

https://github.com/react-navigation/react-navigation/issues/1797

Updating/Reinstalling Expo 似乎解决了你的问题，如果是的话！

还有一个针对 Expo 网络集成的旧修复程序也存在此问题，如本期所述：

https://github.com/react-navigation/react-navigation/issues/6165

理论上它是固定的，但如果你使用的是旧版本的 React Navigation...好吧，看来你可以通过将 cardStyle 属性 设置为 {flex: 1}