React Native - интеграция с Navigator и Tab Bar

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

То, что вы пытаетесь достичь, может быть сделано очень легко и с меньшим количеством кода.