Question

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

在我看来，我必须使用TabNavigator复合StackNavigator，但我不知道是怎么做的。

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

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

完成签名后，您可以转到标签页（在这种情况下，我会删除导航历史记录）：

this.props.navigator.immediatelyResetStack([Router.getRoute('tabScreen')]);

我的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,
  },
});

反应原生。如果未对用户进行身份验证，请导航至SignIn / SignUp屏幕

2 个答案: