Question

我正在使用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',
    },
  ],
});

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

这是我的代码：

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;

感谢。

Answer 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',
          },
        ],
      })
    );

Answer 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();

React-native-navigation不从组件内部返回

2 个答案: