无法使用 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 存储库中的此问题描述了该问题：

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

如果是这种情况，更新/重新安装 Expo 似乎可以解决您的问题！

Expo 的 Web 集成的一个旧修复程序也存在此问题，如本期所述：

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

理论上它是固定的，但如果你使用的是旧版本的 React Navigation...那么，似乎你可以通过将属性设置cardStyle为来解决这个问题{flex: 1}