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

您想要实现的目标可以很容易地用更少的代码来完成。