React Native - Navigator und Tab Bar Integration

Question

Ich habe versucht, eine Lösung für die Integration von TabBarIOS und Navigator zu finden, und wurden leer ausgegangen. Was ich versuche zu lösen, ist ein Bildschirm, der beim Start (ohne Tabs) einen Anmeldebildschirm anzeigt und dann zu einem Home-Bildschirm navigiert, der Registerkarten enthält.

Hier sind meine Index, Login Bildschirm, Tab Bar Komponente und Navigator Component Dateien.

Wenn jemand irgendwelche Vorschläge hat, würde ich es sehr schätzen!

Dank

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

Ich schlage vor, diese Routing-Bibliothek: https://github.com/aksonov/react-native-router-flux

Was Sie erreichen möchten, kann sehr einfach und mit weniger Code durchgeführt werden.