反应原生.如果用户未通过身份验证，请导航到“登录/注册”屏幕

Question

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

在我看来，我必须将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);

Answer 1

使用前导航，我是这样做的：

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

完成签名后，您可以转到选项卡屏幕(在这种情况下，我删除了导航历史记录(：

this.props.navigator.immediatelyResetStack([Router.getRoute('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>
        );
    }

Answer 2

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

例：

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