在单一屏幕应用程序中进行反应原生导航中基于选项卡的应用程序

时间:2017-07-31 17:01:03

标签: android ios reactjs react-native react-native-navigation

我想知道如何从单屏幕应用程序转到基于标签的应用程序。这里有一个类似的问题没有相关答案。

目前我正在做这个

Navigation.startSingleScreenApp({
    screen: {
      screen: 'Login',
      title: 'Login'
    }
  });

  Navigation.startTabBasedApp({
    tabs: [
      {
        label: 'tab1', 
        screen: 'Login', 
        icon: tab1Icon, 
        selectedIcon: tab1Icon, 
        },
        title: 'tab1', 
        navigatorStyle: {}, 
        navigatorButtons: {} 
      },
      {
        label: 'tab2',
        screen: 'tab2',
        icon: tab2Icon,
        selectedIcon: tab2Icon,
        title: 'tab2'
      },
       {
        label: 'tab3',
        screen: 'tab3',
        icon: tab3Icon,
        selectedIcon: tab3Icon,
        title: 'tab3'
      },
  });

所以现在我只是用登录屏幕覆盖第一个标签页(我在那个屏幕上隐藏了标签页"当我按下登录按钮时,我只需将堆栈向上移动到tab1屏幕,其中标签可见。

所以即使我有一个startSingleScreenApp,应用程序仍然从tabBasedApp启动,所以我不确定startSingleScreenApp是否做了什么。

有使用此库的经验的人可以告诉我如何继续吗?

2 个答案:

答案 0 :(得分:0)

我会为用户成功登录时创建一个模态视图,然后会显示TabNavigator。

让我们从应用程序的入口点开始,App.js文件:

import...

export default class App extends React.Component {
  render() {
    return (
        <LoginScreen/>
    );
  }
}

AppRegistry...

这将在您启动应用时显示LoginScreen,在LoginScreen.js内,您将存储模态

import ...

class LoginScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      successfulLoginModalVisible: false
    }
  }

 setSuccessfulLoginModalVisible(visible) {
    this.setState({successfulLoginModalVisible: visible});
  }

...

  render() {
    return(
      <ViewContainer>
        <Modal
          animationType={"slide"}
          visible={this.state.successfulLoginModalVisible}
        >
          <SuccessfulLoginScreen onLogout={() => this.hideSuccessfulLoginModal()}/>
        </Modal>
      </ViewContainer>
    );
  }
}

简单地说,在本机中,模态将根据应该存储在状态中的布尔值(即this.state.successfulLoginModalVisible)来呈现自身。要使此模态可见,只需调用setSuccessfulLoginModalVisible(true)函数(例如按下按钮)

最后,让我们看看SuccessfulLoginScreen.js

import ...
export const MyAccountStack = StackNavigator({ //This stack will be used to manage the Tab1 stack

  MyAccount: { screen: MyAccountTab },
  ViewFollowers: { screen: ViewFollowersScreen },
  ViewFollowing: { screen: ViewFollowingScreen },
  EditAccount: { screen: EditAccountScreen },

});

export default tabNavigation = TabNavigator ({

  Tab1: {screen: MyAccountStack,
      navigationOptions: {
        tabBarLabel: 'My Account',
      }
  },
  Tab2: {screen: ...},
  Tab3: {screen: ...},
  }, {
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    tabBarOptions: {
        activeTintColor: 'white',
        activeBackgroundColor: 'darkgrey',
    }
});

然后,此逻辑将允许您为每个单独的选项卡维护堆栈。

这是我要采取的方法。请注意,我一直在强调我在iOS上的开发;我还没有在Android上检查过这种行为(但我相信不应该有太大的差异,如果有的话)。希望我能帮忙!

答案 1 :(得分:0)

在react-native-navigation中,假设您可以多次调用startSingleScreenApp和startSingleScreenApp。

例如,您可以使用此命令通过“登录”或“主页”屏幕启动应用程序:

Navigation.startSingleScreenApp({
    // ...
})

稍后,您可以从该屏幕或抽屉中的按钮调用:

Navigation.startTabBasedApp({
    // ...
})

导航器将启动基于选项卡的界面,替换之前的导航堆栈。

两者都可以包含相同的抽屉配置。

您可以稍后再次调用startSingleScreenApp()以转到另一个屏幕,依此类推。您可以随时使用新的导航堆替换导航器。