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

【问题标题】：Can't scroll with react-native-paper and @react-navigation/bottom-tabs无法使用 react-native-paper 和 @react-navigation/bottom-tabs 滚动
【发布时间】：2020-04-29 21:50:30
【问题描述】：

我有：

<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 尝试使其与网络兼容。

【问题讨论】：

您想滚动Conversations 组件吗？如果是这样，您能否添加一个示例？

标签： react-native expo react-navigation react-native-paper

【解决方案1】：

看来这实际上是 Expo 的问题，我假设您正在使用它来测试您的应用程序。该问题在 React Navigation 存储库中的此问题中进行了描述：

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

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

Expo 的网络集成也有一个旧的修复也有这个问题，如本期所述：

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

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

【讨论】：