0

我正在为我的应用程序使用 wix 的本机导航。

如果我的应用程序中只有这样的，它工作正常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;

谢谢。

4

2 回答 2

0

我有和你类似的方法。我正在使用 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();
于 2018-03-11T14:51:33.150 回答
0

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

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',
          },
        ],
      })
    );
于 2018-01-25T21:52:33.253 回答