Question

我正在研究一个带有Meteor的React Native应用程序，并且已经尝试了几个npm包来确定哪个可以最好地处理本机选项卡和抽屉导航。 react-native-navigation包似乎做得非常好 - 但它似乎绕过了我用来确定用户在启动时登录状态的逻辑。

这是App.js文件，在加载时导入到Android和iOS索引文件中：

import React from 'react';
import Meteor, { createContainer } from 'react-native-meteor';

import LoggedOut from './layouts/LoggedOut';
import LoggedIn from './layouts/LoggedIn';
import Loading from './components/Loading';
import config from './config';

Meteor.connect(config.METEOR_URL);

const MyApp = (props) => {
  const { status, user, loggingIn } = props;

  if (status.connected === false || loggingIn) {
    return <Loading />;
  } else if (user !== null) {
    return <LoggedIn />;
  } else {
    return <LoggedOut />;
  }
};

MyApp.propTypes = {
  status: React.PropTypes.object,
  user: React.PropTypes.object,
  loggingIn: React.PropTypes.bool,
};

export default createContainer(() => {
  return {
    status: Meteor.status(),
    user: Meteor.user(),
    loggingIn: Meteor.loggingIn(),
  };
}, MyApp);

我已将react-native-navigation Navigation.startTabBasedApp()代码放在<LoggedIn/>组件中：

import { Navigation } from 'react-native-navigation';

import { registerScreens } from '../helpers/navigation';
registerScreens();

Navigation.startTabBasedApp({
  tabs: [
    {
      label: 'Records',
      screen: 'screen.Records',
      icon: require('../images/NavigatorMenuIcon1.png'),
      selectedIcon: require('../images/NavigatorMenuIcon1.png'),
      title: 'Records'
    },
    {
      label: 'Favorites',
      screen: 'screen.Favorites',
      icon: require('../images/NavigatorMenuIcon2.png'),
      selectedIcon: require('../images/NavigatorMenuIcon2.png'),
      title: 'Favorites'
    },
  ],
  drawer: {
    left: {
      screen: 'screen.Menu'
    },
  },
  passProps: {},

});

react-native-navigation包确实需要针对iOS的一些Xcode配置，包括将依赖项react-native-controllers的本机文件添加到Xcode项目中;并修改AppDelegate.m文件...虽然我无法弄清楚为什么启动配置被有效忽略。

更新：

我在react-native-navigation中发现了一个封闭的问题，解释了如何使用混合（选项卡/单页）应用程序的布局：您只需启动一个新的“app”实例。例如，在我的应用程序中，我希望注销功能重定向到登录屏幕。

这可以通过调用启动新的单个屏幕应用程序实例的函数（Navigation.startSingleScreenApp）来实现。我对此进行了测试并确认它适用于LogOut。登录/开始屏幕可以使用类似的解决方案。

  handleSignOut(props) {
    Meteor.logout(props);
    Navigation.startSingleScreenApp ({
      screen: {
        screen: 'screen.SignIn', // unique ID registered with Navigation.registerScreen
        navigatorStyle: {navBarHidden: true}, // override the navigator style for the screen, see "Styling the navigator" below (optional)
        navigatorButtons: {} // override the nav buttons for the screen, see "Adding buttons to the navigator" below (optional)
      },
    });

然而，App启动时问题仍然存在，因为导航应用程序在导入到App / index文件时正在加载。本质上，定义app状态的if / else逻辑被忽略。

使用react-native-navigation包

0 个答案: