React native 反应自然。如果用户未通过身份验证，则导航至登录/注册屏幕

我正在设计一个选项卡式应用程序。当应用程序启动时，它会检查用户是否经过身份验证，如果用户通过身份验证，则会呈现应用程序主选项卡，但如果用户未登录，则应呈现屏幕。登录不是一个选项卡，而是一个单独的屏幕。它有一个“注册”按钮，必须打开注册屏幕。当在注册屏幕上按下“后退”按钮时，注册屏幕打开

在我看来，我必须将StackNavigator与TabNavigator组合起来，但我不知道如何做到这一点

import React, { Component } from 'react';
import { AppRegistry, View, Text } from 'react-native';
import { TabNavigator } from 'react-navigation';

class SignIn extends Component {    
    render() {
        return(
            <View>
                <Text>SignIn screen</Text>
            </View>
        );
    };
}

class SignUp extends Component {
    render() {
        return(
            <View>
                <Text>SignUp screen</Text>
            </View>
        );
    };
}

class TabOne extends Component {
    static navigationOptions = {
        title: "TabOne"
    };
    render() {
        return(
            <View>
                <Text>This is tab One</Text>
            </View>
        );
    };
}

class TabTwo extends Component {
    static navigationOptions = {
        title: "TabTwo"
    };
    render() {
        return(
            <View>
                <Text>This is tab Two</Text>
            </View>
        );
    };
}

const TabApp = TabNavigator({
    First: { screen: TabOne },
    Second: { screen: TabTwo }
});

AppRegistry.registerComponent('TabApp', () => TabApp);

import React，{Component}来自'React'；
从“react native”导入{AppRegistry，View，Text}；
从“反应导航”导入{TabNavigator}；
类签名扩展组件{
render（）{
返回(
登录屏幕
);
};
}
类注册扩展了组件{
render（）{
返回(
注册屏幕
);
};
}
类TabOne扩展组件{
静态导航选项={
标题：“塔伯恩”
};
render（）{
返回(
这是第一页
);
};
}
类TabTwo扩展组件{
静态导航选项={
标题：“Tab2”
};
render（）{
返回(
这是表二
);
};
}
const TabApp=TabNavigator({
第一：{screen:TabOne}，
第二：{screen:TabTwo}
});
AppRegistry.registerComponent（'TabApp'，（）=>TabApp）；

使用ex navigation，我是这样做的：

class App extends React.Component {

    render() {

        if (!isLoggedIn) {
            return (
                <NavigationProvider router={Router}>
                    <StackNavigation
                        initialRoute={Router.getRoute('sign')}
                    />
                </NavigationProvider>);
        }

        return (
            <NavigationProvider router={Router}>
                <StatusBar barStyle="light-content" />
                <TabScreen />
            </NavigationProvider>
        );
    }
}

AppRegistry.registerComponent('Your-App-Name', () => App);

我的TabScreen是带有选项卡的主屏幕。就这样

render() {
        return (
            <TabNavigation
                id="main"
                navigatorUID="main"
                initialTab="home"
            >
                <TabItem
                    id="home"
                    title="Home"
                    renderTitle={this.renderTitle}
                    renderIcon={this.renderIcon}
                >
                    <StackNavigation
                        id="home"
                        navigatorUID="home"
                        initialRoute={Router.getRoute('home')}
                    />
                </TabItem>

                <TabItem
                    id="info"
                    title="Info"
                    renderTitle={this.renderTitle}
                    renderIcon={this.renderIcon}
                >
                    <StackNavigation
                        id="info"
                        initialRoute={Router.getRoute('info')}
                    />
                </TabItem>

                <TabItem
                    id="profile"
                    title="Profile"
                    renderTitle={this.renderTitle}
                    renderIcon={this.renderIcon}
                >
                    <StackNavigation
                        id="profile"
                        initialRoute={Router.getRoute('profile')}
                    />
                </TabItem>
            </TabNavigation>
        );
    }

render（）{
返回(
);
}

使用ex navigation，我是这样做的：

class App extends React.Component {

    render() {

        if (!isLoggedIn) {
            return (
                <NavigationProvider router={Router}>
                    <StackNavigation
                        initialRoute={Router.getRoute('sign')}
                    />
                </NavigationProvider>);
        }

        return (
            <NavigationProvider router={Router}>
                <StatusBar barStyle="light-content" />
                <TabScreen />
            </NavigationProvider>
        );
    }
}

AppRegistry.registerComponent('Your-App-Name', () => App);

我的TabScreen是带有选项卡的主屏幕。就这样

render() {
        return (
            <TabNavigation
                id="main"
                navigatorUID="main"
                initialTab="home"
            >
                <TabItem
                    id="home"
                    title="Home"
                    renderTitle={this.renderTitle}
                    renderIcon={this.renderIcon}
                >
                    <StackNavigation
                        id="home"
                        navigatorUID="home"
                        initialRoute={Router.getRoute('home')}
                    />
                </TabItem>

                <TabItem
                    id="info"
                    title="Info"
                    renderTitle={this.renderTitle}
                    renderIcon={this.renderIcon}
                >
                    <StackNavigation
                        id="info"
                        initialRoute={Router.getRoute('info')}
                    />
                </TabItem>

                <TabItem
                    id="profile"
                    title="Profile"
                    renderTitle={this.renderTitle}
                    renderIcon={this.renderIcon}
                >
                    <StackNavigation
                        id="profile"
                        initialRoute={Router.getRoute('profile')}
                    />
                </TabItem>
            </TabNavigation>
        );
    }

render（）{
返回(
);
}

您需要在导航堆栈中再添加一个级别

例如：

const MyTabsNavigator = TabNavigator({
    First: { screen: TabOne },
    Second: { screen: TabTwo }
});

const AppNavigator = StackNavigator({
  MyTabs: { 
    screen: MyTabsNavigator,
  },
  SignIn: { 
    screen: SignIn,
  },
});

---

您需要在导航堆栈中再添加一个级别

例如：

const MyTabsNavigator = TabNavigator({
    First: { screen: TabOne },
    Second: { screen: TabTwo }
});

const AppNavigator = StackNavigator({
  MyTabs: { 
    screen: MyTabsNavigator,
  },
  SignIn: { 
    screen: SignIn,
  },
});

---

谢谢你的回答。实际上，我知道如何使用

ex-navigation

。我只想用最新的库实现这一点，因为不再开发

ex-navigation

。谢谢您的回答。实际上，我知道如何使用

ex-navigation

。我只想用最新的库实现这一点，因为不再开发

ex-navigation

。