javascript - React Native - 导航器和选项卡栏集成

Question

我一直在尝试寻找集成 TabBarIOS 和 Navigator 的解决方案，但一无所获。基本上，我想要解决的问题是拥有一个在启动时显示登录屏幕(没有选项卡)的屏幕，然后导航到有选项卡的主屏幕。

这是我的索引、登录屏幕、选项卡栏组件和导航器组件文件。

如果有人有任何建议，我将不胜感激!

谢谢

Index.ios.js:

'use strict'

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, TabBarIOS } from 'react-native';
import _ from 'lodash';
import Icon from 'react-native-vector-icons/FontAwesome';

import StatusBarBackground from './app/components/StatusBarBackground'
import AppNavigator from './app/navigation/AppNavigator';
import LoginIndexScreen from './app/screens/LoginIndexScreen'
import BottomBarIOS from './app/components/BottomBarIOS'

class mobile extends Component {

    render() {
        return (
            <AppNavigator />
        );
    }

}

const styles = StyleSheet.create({

  navigatorStyles: {

  }

});

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

BottomBarIOS.js

'use strict'

import React, { Component } from 'react';
import { StyleSheet, Text, TabBarIOS } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

import AppNavigator from '../navigation/AppNavigator';

class BottomBarIOS extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedTab: "HomeScreen"
        }
    }

    render() {
        return (
            <TabBarIOS selectedTab={this.state.selectedTab}>

                <TabBarIOS.Item
                    selected={this.state.selectedTab === "HomeScreen"}
                    title="Home"
                    onPress={() => this.setState({selectedTab: "HomeScreen"})}>
                        <AppNavigator
                        initialRoute={{ident: "HomeScreen"}} />
                </TabBarIOS.Item>

                <TabBarIOS.Item
                    selected={this.state.selectedTab === "CatalogueScreen"}
                    title="Catalogue"
                    onPress={() => this.setState({selectedTab: "CatalogueScreen"})}>
                        <AppNavigator
                        initialRoute={{ident: "CatalogueScreen"}} />
                </TabBarIOS.Item>

                <TabBarIOS.Item
                    selected={this.state.selectedTab === "MapScreen"}
                    title="Map"
                    onPress={() => this.setState({selectedTab: "MapScreen"})}>
                        <AppNavigator
                        initialRoute={{ident: "MapScreen"}} />
                </TabBarIOS.Item>

                <TabBarIOS.Item
                    selected={this.state.selectedTab === "UserProfileScreen"}
                    title="Profile"
                    onPress={() => this.setState({selectedTab: "UserProfileScreen"})}>
                        <AppNavigator
                        initialRoute={{ident: "UserProfileScreen"}} />
                </TabBarIOS.Item>
            </TabBarIOS>
        );
    }

}

const styles = StyleSheet.create({

  navigatorStyles: {

  }

});

module.exports = BottomBarIOS;

LoginIndexScreen.js

'use strict'

import React, { Component } from 'react';
import { AsyncStorage, StyleSheet, Text, View, TouchableOpacity, AlertIOS,} from 'react-native';

import ViewContainer from '../components/ViewContainer';
import StatusBarBackground from '../components/StatusBarBackground';
import AppNavigator from '../navigation/AppNavigator'

class LoginIndexScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectedTab: "LoginIndexScreen"
        }
    }

    render() {
        return (
            <ViewContainer>
                <StatusBarBackground />
                <View style={styles.textContainer}>
                    <Text style={styles.loginText}>Welcome to Poqet</Text>
                    <TouchableOpacity onPress={(event) => this._navigateToHomeScreen()}>
                        <Text style={styles.nextStep}>Press to go to Home Screen</Text>
                    </TouchableOpacity>
                </View>
            </ViewContainer>
        );
    }

    _navigateToHomeScreen() {
        this.props.navigator.push({
            ident: "HomeScreen"
        });
    }
}

const styles = StyleSheet.create({

    textContainer: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },

    loginText: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 30
    },

    nextStep: {
        marginTop: 80
    }

});

module.exports = LoginIndexScreen;

AppNavigator.js

'use strict'

import React, { Component } from 'react';
import { Navigator } from 'react-native';

import RegisterIndexScreen from '../screens/RegisterIndexScreen';
import LoginIndexScreen from '../screens/LoginIndexScreen';
import HomeScreen from '../screens/HomeScreen';
import UserProfileScreen from '../screens/UserProfileScreen';
import CatalogueScreen from '../screens/CatalogueScreen';
import MapScreen from '../screens/MapScreen';

class AppNavigator extends Component {

    _renderScene(route, navigator) {
        var globalNavigatorProps = { navigator }

        switch(route.ident) {
            case "RegisterIndexScreen":
                return (
                    <RegisterIndexScreen {...globalNavigatorProps} />
                )
            case "LoginIndexScreen":
                return (
                    <LoginIndexScreen {...globalNavigatorProps} />
                )
            case "HomeScreen":
                return (
                    <HomeScreen {...globalNavigatorProps} />
                )
            case "UserProfileScreen":
                return (
                    <UserProfileScreen {...globalNavigatorProps}
                    person={route.person} />
                )
            case "CatalogueScreen":
                return (
                    <CatalogueScreen {...globalNavigatorProps} />
                )
            case "MapScreen":
                return (
                    <MapScreen {...globalNavigatorProps} />
                )
            default:
                return (
                    <LoginIndexScreen {...globalNavigatorProps} />
                )
        }

    }

    render() {
        return (
            <Navigator
                initialRoute={{ident: "LoginIndexScreen"}}
                ref="appNavigator"
                renderScene={this._renderScene}
                configureScene={(route) => ({...route.sceneConfig || Navigator.SceneConfigs.FloatFromRight, })} />
        );
    }

}

module.exports = AppNavigator;

Answer 1

我建议使用这个路由库:https://github.com/aksonov/react-native-router-flux

您想要实现的目标可以非常轻松地完成，并且使用更少的代码。