react-native - 无法使用 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}