Question

我正在使用react-navigation-v3来构建电影流应用程序。

该应用程序在登录页面（登录后）上具有熟悉的底部标签导航，其中显示三个标签-立即观看，收藏夹和设置。

着陆页（“立即观看”）向用户显示电影列表。

我开发了一个新模块，该模块还允许用户在应用程序上查看SERIES。

现在，我的应用将在同一底部导航标签“立即观看”中的两个单独的顶部标签（如下所示）中显示电影和系列。

我想使此功能动态化-也就是说，如果我从服务器上关闭SERIES，则我的路线应更改以反映现在只有MOVIES像它们原来那样存在（没有材料的顶部标签）。

这是我的路由配置-

export const AppContainer = createAppContainer(createSwitchNavigator(
    {
        // Loading screen, authenticates user and redirects them where appropriate
        Loading,

        // Tutorial Screens
        Tutorial: TutorialTabs,

        // Authentication Stack, Sign-In/Up and forget password.
        Auth: AuthStack,

        // Main Stack, all other screens
        App: AppStack,
    },

    {
        initialRouteName: 'Loading',
    }
));

这是上面使用的 AppStack -

const AppStack = createStackNavigator(
  {
    // Default Screen, Main bottom-tab-navigator.
    Main : switchStack,
    About,
    WebContent,
  },
  {
    initialRouteName : 'Main',
    defaultNavigationOptions: getStackNavigationOptions,
    mode: 'modal'
  },
);

这是我仅用于在电影和电影+系列之间切换的SwitchNavigator-

const switchStack = createSwitchNavigator({
  'PageWithMoviesAndSeries' : PageWithMoviesAndSeries,
  'PageWithMoviesOnly' : PageWithMoviesOnly,
  },
  {
    initialRouteName : getInitialRouteName()
  }
);

我尝试使用下面定义的getInitialRouteName（）函数在两者之间切换-

function getInitialRouteName() {
  if(window.isStreamingSeriesEnabled === true)
    return 'PageWithMoviesAndSeries';
  return 'PageWithMoviesOnly';
}

在使用setTimeOut模拟网络操作之后，我在根 App.js 中设置此 window.isStreamingSeriesEnabled 变量。

    window.isStreamingSeriesEnabled = false;

    setTimeout(() => {

      window.isStreamingSeriesEnabled = true;

}, 2000);

最后，这就是在App.js（根目录）中使用我的appContainer的方式-

render() {
    const { activityIndicatorVisible, activityIndicatorMessage } = this.state;

    return (
      <View style={{ flex: 1 }} onLayout={this.onLayout}>
        <AppContainer
          ref={nav => {this.navigator = nav;}}
          onNavigationStateChange={handleNavigationStateChange}
        />
        {this.renderGeolocationRequestRationale()}
        <ActivityIndicator
          visible={activityIndicatorVisible}
          message={activityIndicatorMessage}
        />
      </View>
    );
  }
}

但是问题是，即使设置了变量 window.isStreamingSeriesEnabled 之后，我的应用也无法路由到适当的屏幕，因为某种原因，getInitialRouteName（）只能被调用一次（在设置 window.isStreamingSeriesEnabled 变量值之前）。

这个简单的问题让我很沮丧。

我查看了Github的StackOverflow，但是遇到的任何解决方案都没有适用于该版本的v3或与之相关的反应导航库。

请帮助我弄清楚如何基于服务器配置为应用动态分配routeName。谢谢。

**编辑：**在window.isStreamingSeriesEnabled变量中有错字。解决该问题。

Answer 1

您似乎在getInitialRouteName函数中使用了不同的键。

isStreamingSeriesEnabled
isStreamingEnabled

function getInitialRouteName() {
  if(window.isStreamingSeriesEnabled === true)
    return 'PageWithMoviesAndSeries';
  return 'PageWithMoviesOnly';
}

window.isStreamingEnabled = false;

React Navigation SwitchNavigator的动态初始路线

1 个答案: