Stream IO Feeds React Native 和 React Navigation

Question

我正在使用 Stream IO Feeds API for React Native. I was trying to follow this example，但在尝试运行应用程序时出现此错误：

Error: Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.

This error is located at:
    in FeedInner
    in StreamAppConsumer (created by Feed)
    in Feed (created by FlatFeed)
    in FlatFeed (created by HomeFeed)
    in StreamApp (created by HomeFeed)
    in RCTView (created by View)
    in View (created by HomeFeed)
    in HomeFeed (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by SceneView)
    in SceneView (created by PagerViewAdapter)
    in RNCViewPager (created by PagerView)
    in PagerView (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by PagerViewAdapter)
    in PagerViewAdapter (created by TabView)
    in RCTView (created by View)
    in View (created by TabView)
    in TabView (created by MaterialTopTabView)
    in MaterialTopTabView (created by MaterialTopTabNavigator)
    in Unknown (created by MaterialTopTabNavigator)
    in MaterialTopTabNavigator (created by App)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by App)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by SafeAreaView)
    in SafeAreaView (created by App)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in main(RootComponent)

我注意到每当我使用带有 React 导航容器的 Stream Flatfeed 时都会出现此问题。当提要是独立的（不是任何 stack/tab 导航的一部分）时，它会正确呈现。我正在使用 Node v16.13.1 在 Android 上测试应用程序。对此有什么建议吗？

我能够在较小的应用程序上重现此问题：

导入语句：

    import React, { Fragment } from 'react';
    import { Text, View } from 'react-native';
    import SafeAreaView from 'react-native-safe-area-view';
    import { SafeAreaProvider } from 'react-native-safe-area-context';
    import { NavigationContainer } from '@react-navigation/native';
    import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
    import { StreamApp, FlatFeed, Activity, LikeButton, StatusUpdateForm, ReactionIconBar} from 'expo-activity-feed';
    
    const Tab = createMaterialTopTabNavigator();

第一个选项卡（带流提要）：

    function Feed() {
      return (
        <StreamApp
        apiKey={apiKey}
        appId={appId}
        token={token}>
        <FlatFeed
          Activity={props => (
            <Fragment>
              <Activity
                {...props}
                notify
                Footer={
                    <ReactionIconBar>
                      <LikeButton {...props} />
                    </ReactionIconBar>
                }
              />
            </Fragment>)}/>
        <StatusUpdateForm feedGroup='timeline' />
      </StreamApp>
      )
    }

第二个标签：

    function Screen2() {
      return (
        <View style={{ flex: 1 }}>
          <Text>Screen 2</Text>
        </View>
      );
    }

导出（所有代码包括之前的代码都在App.js）：

    export default App = () => {
      return (
        <SafeAreaProvider>
          <SafeAreaView style={{ flex: 1 }}>
              <NavigationContainer>
                <Tab.Navigator
                  screenOptions={{
                    tabBarLabelStyle: { fontSize: 12 },
                    tabBarItemStyle: { width: 100 },
                  }}
                >
                  <Tab.Screen name="Feed" component={ Feed } />
                  <Tab.Screen name="Screen2" component={ Screen2 } />
                </Tab.Navigator>
              </NavigationContainer>
          </SafeAreaView>
        </SafeAreaProvider>
      );
    };

Answer 1

我们在 GetStream 的 GitHub 存储库中问了一个类似的问题，发现我们需要升级到 Expo 44 并将 expo-activity-feed 降级到版本 1.0.0 并确保它没有 ^ 在 1.0.0 的末尾。希望对你也有帮助。

Link 到 GitHub 问题讨论 https://github.com/GetStream/react-native-activity-feed/issues/244#issuecomment-1013567858

Stream IO Feeds React Native 和 React Navigation

Stream IO Feeds React Native with React Navigation

react-native

getstream-io

react-native-navigation