React-native-navigation 未从组件内部返回答案

【问题标题】：React-native-navigation not returning from inside a componentReact-native-navigation 未从组件内部返回
【发布时间】：2018-01-25 14:06:22
【问题描述】：

我正在为我的应用程序使用 wix 的 react native navigation。

如果我的应用程序中只有 Navigation.startTabBasedApp 这样就可以正常工作：

import React, { Component } from 'react';
import Amplify from 'aws-amplify-react-native';
import { Navigation } from 'react-native-navigation';
import { registerScreens } from './screens';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

registerScreens();

return Navigation.startTabBasedApp({
  tabs: [
    {
      label: 'Home',
      screen: 'pumped.HomeScreen',
      title: 'Pumped',
    },
    {
      label: 'Sell',
      screen: 'pumped.ListScreen',
      title: 'Sell an item',
    },
    {
      label: 'Profile',
      screen: 'pumped.ProfileScreen',
      title: 'Profile',
    },
  ],
});

但是，我想根据用户是否登录有条件地呈现单个屏幕或基于选项卡的应用程序。但是，当我在应用程序组件中添加这两个并根据条件返回任何一个（在我的代码中为 true 仅用于测试）时，它不会返回任何内容？

这是我的代码：

import React, { Component } from 'react';
import Amplify from 'aws-amplify-react-native';
import { Navigation } from 'react-native-navigation';
import { registerScreens } from './screens';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

registerScreens();

class App extends Component {
  render() {
    if (true) {
      return Navigation.startSingleScreenApp({
        screen: {
          screen: 'pumped.RegisterScreen',
          navigatorStyle: {},
          navigatorButtons: {},
          title: 'Register',
        },
      });
    }
    return Navigation.startTabBasedApp({
      tabs: [
        {
          label: 'Home',
          screen: 'pumped.HomeScreen',
          title: 'Pumped',
        },
        {
          label: 'Sell',
          screen: 'pumped.ListScreen',
          title: 'Sell an item',
        },
        {
          label: 'Profile',
          screen: 'pumped.ProfileScreen',
          title: 'Profile',
        },
      ],
    });
  }
}

export default App;

谢谢。

【问题讨论】：

标签： reactjs react-native react-native-navigation velo wix-react-native-navigation

【解决方案1】：

试着把你的回报用括号括起来。

if (true) {
      return (
        Navigation.startSingleScreenApp({
          screen: {
            screen: 'pumped.RegisterScreen',
            navigatorStyle: {},
            navigatorButtons: {},
            title: 'Register',
          },
        })
      );
    }
    return ( 
      Navigation.startTabBasedApp({
        tabs: [
          {
            label: 'Home',
            screen: 'pumped.HomeScreen',
            title: 'Pumped',
          },
          {
            label: 'Sell',
            screen: 'pumped.ListScreen',
            title: 'Sell an item',
          },
          {
            label: 'Profile',
            screen: 'pumped.ProfileScreen',
            title: 'Profile',
          },
        ],
      })
    );

【讨论】：

我已经尝试过了，它在组件外部工作，但在它内部仍然没有呈现任何内容，我需要在组件内部返回，因为我正在将应用程序组件传递给 Amazon Cognito 的 hoc跨度>
删除条件后，它是否对每种导航类型单独工作？也许尝试将它们抽象为自己的组件。 if (condition) return else return .
我也试过了，很奇怪，不会抛出任何错误，JavaScript编译器编译到100％没有错误，但它只是停留在启动页面上，我认为它可能有什么与您安装到 iOS 的 appdelegate 文件中的代码有关，它甚至可能需要它来启动应用程序？
两个导航组件是否单独工作？检查wix.github.io/react-native-navigation的安装步骤，也许重新安装
是的，单独工作很好，是的，我已经做过几次了，我认为它需要其中一个元素来实际启动应用程序

【解决方案2】：

我和你有类似的方法。我正在使用 aws-amplify（但不是他们的 HOC 组件）和 redux。有关 redux 的更多信息，请参阅此博客： https://medium.com/react-native-training/explanation-of-react-native-navigation-wix-with-redux-deabcee8edfc

export default class App extends React.Component {
  constructor(props: any) {
    super(props);
    store.subscribe(this.onStoreUpdate);
    store.dispatch({ type: 'INIT' }); // Trigger the onStoreUpdate function
  }

  onStoreUpdate = () => {
    const newLoginState = store.getState().get('auth').get('loginState');
    if (this.currentLoginState !== newLoginState) {
      this.currentLoginState = newLoginState;
      this.startApp(this.currentLoginState);
    }
  }

  startApp = (loginState: string) => {
    switch(loginState) {
      case 'signedOut':
        startLoginSingleScreen();
        return;
      case 'signedIn':
        startHomeTabs();
        return;
      default:
        console.log('Root not found!');
    }
  }
}

and in my index.ios.js and index.android.js:

import App from './App';

const app = new App();

【讨论】：